@odoo/o-spreadsheet 18.1.0-alpha.6 → 18.1.0-alpha.8

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 18.1.0-alpha.6
- @date 2024-11-28T09:07:41.105Z
- @hash 875c901
+ @version 18.1.0-alpha.8
+ @date 2024-12-19T07:50:38.927Z
+ @hash 87a1567
 -->
 <odoo>
   <t t-name="o-spreadsheet-ActionButton">
@@ -460,7 +460,7 @@
           <div
             class="o-autocomplete-description text-truncate"
             t-esc="proposal.description"
-            t-if="props.selectedIndex === proposal_index"
+            t-if="props.selectedIndex === proposal_index || proposal.alwaysExpanded"
           />
         </div>
       </t>
@@ -891,22 +891,22 @@
     <div class="o-filter-menu d-flex flex-column bg-white" t-on-wheel.stop="">
       <t t-if="isSortable">
         <div>
-          <div class="o-filter-menu-item" t-on-click="() => this.sortFilterZone('ascending')">
+          <div class="o-filter-menu-item my-2 mb-3" t-on-click="() => this.sortFilterZone('asc')">
             Sort ascending (A ⟶ Z)
           </div>
-          <div class="o-filter-menu-item" t-on-click="() => this.sortFilterZone('descending')">
+          <div class="o-filter-menu-item my-2" t-on-click="() => this.sortFilterZone('desc')">
             Sort descending (Z ⟶ A)
           </div>
         </div>
         <div class="o-separator"/>
       </t>
-      <div class="o-filter-menu-actions">
-        <div class="o-filter-menu-action-text" t-on-click="selectAll">Select all</div>
-        <div class="o-filter-menu-action-text" t-on-click="clearAll">Clear</div>
+      <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>
       <div class="position-relative">
         <input
-          class="w-100"
+          class="w-100 o-input my-2"
           t-ref="filterMenuSearchBar"
           type="text"
           t-model="state.textFilter"
@@ -918,7 +918,7 @@
         </i>
       </div>
       <div
-        class="o-filter-menu-list d-flex flex-column rounded"
+        class="o-filter-menu-list d-flex flex-column"
         t-ref="filterValueList"
         t-on-click="this.clearScrolledToValue"
         t-on-scroll="this.clearScrolledToValue">
@@ -947,20 +947,22 @@
 
   <t t-name="o-spreadsheet-FilterMenuValueItem">
     <div
-      t-on-click="this.props.onClick"
       t-on-pointermove="this.props.onMouseMove"
       class="o-filter-menu-item o-filter-menu-value"
       t-ref="menuValueItem"
       t-att-class="{'selected': this.props.isSelected}">
-      <div>
-        <div class="o-filter-menu-value-checked">
-          <span t-if="this.props.isChecked">✓</span>
-        </div>
-      </div>
-      <div class="o-filter-menu-value-text text-truncate">
+      <t t-set="value">
         <t t-if="this.props.value === ''">(Blanks)</t>
         <t t-else="" t-esc="this.props.value"/>
-      </div>
+      </t>
+      <!-- toString because t-set with a body creates a LazyValue instead of a string -->
+      <Checkbox
+        name="value.toString()"
+        value="this.props.isChecked"
+        onChange="this.props.onClick"
+        className="'p-2 w-100 pe-auto text-truncate'"
+        label="value.toString()"
+      />
     </div>
   </t>
 
@@ -979,7 +981,7 @@
           t-on-keydown="onInputKeydown"
           t-on-click.stop=""
           t-on-focus.stop="onInputFocused"
-          t-att-value="currentFontSize"
+          t-att-value="props.currentFontSize"
           t-on-change="setSizeFromInput"
           t-ref="inputFontSize"
         />
@@ -987,19 +989,17 @@
           <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
         </span>
       </div>
-      <div
-        class="o-dropdown-content o-text-options"
-        t-if="dropdown.isOpen"
-        t-on-click.stop=""
-        t-att-style="props.dropdownStyle">
-        <t t-foreach="fontSizes" t-as="fontSize" t-key="fontSize">
-          <div
-            t-esc="fontSize"
-            t-att-data-size="fontSize"
-            t-on-click="() => this.setSizeFromList(fontSize)"
-          />
-        </t>
-      </div>
+      <Popover t-if="dropdown.isOpen" t-props="popoverProps">
+        <div class="o-text-options bg-white" t-on-click.stop="" t-ref="fontSizeList">
+          <t t-foreach="fontSizes" t-as="fontSize" t-key="fontSize">
+            <div
+              t-esc="fontSize"
+              t-att-data-size="fontSize"
+              t-on-click="() => this.setSizeFromList(fontSize)"
+            />
+          </t>
+        </div>
+      </Popover>
     </div>
   </t>
 
@@ -1801,6 +1801,11 @@
       <path fill="currentColor" d="M4 14v2h10v-2H4m0-8v2h10V6H4m-2 6h14v-2H2v2M2 2v2h14V2H2"/>
     </svg>
   </t>
+  <t t-name="o-spreadsheet-Icon.IRREGULARITY_MAP">
+    <div class="o-icon">
+      <i class="fa fa-align-center fa-rotate-270"/>
+    </div>
+  </t>
   <t t-name="o-spreadsheet-Icon.ALIGN_RIGHT">
     <svg class="o-icon align-right">
       <path fill="currentColor" d="M6 16h10v-2H6v2m-4-4h14v-2H2v2M2 2v2h14V2H2m4 6h10V6H6v2"/>
@@ -2700,6 +2705,7 @@
       updateAlignment.bind="updateAxisTitleAlignment"
       updateColor.bind="updateAxisTitleColor"
       style="axisTitleStyle"
+      onFontSizeChanged.bind="updateAxisTitleFontSize"
     />
   </t>
 
@@ -2741,6 +2747,7 @@
           updateAlignment.bind="updateChartTitleAlignment"
           updateColor.bind="updateChartTitleColor"
           style="titleStyle"
+          onFontSizeChanged.bind="updateChartTitleFontSize"
         />
         <t t-slot="general-extension"/>
       </t>
@@ -3012,6 +3019,12 @@
           </div>
         </div>
         <div class="o-divider"/>
+        <FontSizeEditor
+          currentFontSize="props.style.fontSize"
+          onFontSizeChanged.bind="this.updateFontSize"
+          class="'o-hoverable-button'"
+        />
+        <div class="o-divider"/>
         <ColorPickerWidget
           currentColor="props.style.color"
           toggleColorPicker="(ev) => this.toggleDropdownTool('fillChartColorTool', ev)"
@@ -3260,6 +3273,33 @@
       />
     </svg>
   </t>
+  <t t-name="o-spreadsheet-ChartPreview.GEO_CHART">
+    <svg
+      viewBox="0 0 32 32"
+      xmlns="http://www.w3.org/2000/svg"
+      class="o-chart-preview"
+      fill="none"
+      stroke-width="0.5"
+      stroke-linejoin="round">
+      <circle cx="16" cy="16" r="13" fill="#c4e4ff"/>
+      <path
+        stroke="#eb6d00"
+        fill="#ffe1c8"
+        d="M12.225 16.293c0 6.8 4 9 5 9 3.5 0 2-5.293 3.5-6.793s5-.707 5-4.207-2-5-5-5c-5 0-8.5 1.5-8.5 7z"
+      />
+      <path
+        fill="#ffe1c8"
+        d="M21.5 4.4c0 1.167-1.735 1.5-3 1.5-5.217 0-10.705 3.48-11.421 8.004C6.992 14.549 6.552 15 6 15H3.07 A 13 13 0 0 1 21.5 4.2
+                M3.8 20.5c.785.262 2.126 1.285 3.44 1.517.57.101 1.153.464 1.299 1.023.303 1.16.548 1.992-.239 3.58 A 13 13 0 0 1 3.8 20.5"
+      />
+      <path
+        stroke="#eb6d00"
+        d="M21.5 4.4c0 1.167-1.735 1.5-3 1.5-5.217 0-10.705 3.48-11.421 8.004C6.992 14.549 6.552 15 6 15H3.07
+                M3.8 20.5c.785.262 2.126 1.285 3.44 1.517.57.101 1.153.464 1.299 1.023.303 1.16.548 1.992-.239 3.58"
+      />
+      <circle cx="16" cy="16" r="13" stroke="#444"/>
+    </svg>
+  </t>
 
   <t t-name="o-spreadsheet-ChartTypePicker">
     <t t-set="selectedChartProperties" t-value="getSelectedChartSubtypeProperties()"/>
@@ -3554,6 +3594,120 @@
     </tr>
   </t>
 
+  <t t-name="o-spreadsheet-GeoChartConfigPanel">
+    <div>
+      <GeoChartRegionSelectSection
+        figureId="props.figureId"
+        definition="props.definition"
+        updateChart="props.updateChart"
+      />
+
+      <ChartDataSeries
+        ranges="dataRanges"
+        onSelectionChanged="(ranges) => this.onDataSeriesRangesChanged(ranges)"
+        onSelectionConfirmed="() => this.onDataSeriesConfirmed()"
+        hasSingleRange="true"
+      />
+      <ChartLabelRange
+        range="this.getLabelRange()"
+        isInvalid="isLabelInvalid"
+        onSelectionChanged="(ranges) => this.onLabelRangeChanged(ranges)"
+        onSelectionConfirmed="() => this.onLabelRangeConfirmed()"
+        options="this.getLabelRangeOptions()"
+        title.translate="Territories"
+      />
+
+      <ChartErrorSection t-if="errorMessages.length" messages="errorMessages"/>
+    </div>
+  </t>
+
+  <t t-name="o-spreadsheet-GeoChartDesignPanel">
+    <GeneralDesignEditor
+      figureId="props.figureId"
+      definition="props.definition"
+      updateChart="props.updateChart">
+      <t t-set-slot="general-extension">
+        <Section class="'pt-0'" title.translate="Legend position">
+          <select
+            t-att-value="props.definition.legendPosition ?? 'bottom-left'"
+            class="o-input o-chart-legend-position"
+            t-on-change="this.updateLegendPosition">
+            <option value="none">None</option>
+            <option value="top">Top left</option>
+            <option value="right">Top right</option>
+            <option value="bottom">Bottom right</option>
+            <option value="left">Bottom left</option>
+          </select>
+        </Section>
+      </t>
+    </GeneralDesignEditor>
+
+    <SidePanelCollapsible collapsedAtInit="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>
+
+        <Section class="'pt-0 o-missing-value'" title.translate="Countries without value">
+          <RoundColorPicker
+            currentColor="selectedMissingValueColor"
+            onColorPicked.bind="updateMissingValueColor"
+          />
+        </Section>
+      </t>
+    </SidePanelCollapsible>
+  </t>
+
+  <t t-name="o-spreadsheet-GeoChartRegionSelectSection">
+    <Section class="'o-geo-region'" title.translate="Region">
+      <select class="o-input" t-on-change="this.updateSelectedRegion">
+        <t t-foreach="availableRegions" t-as="region" t-key="region.id">
+          <option
+            t-att-value="region.id"
+            t-esc="region.label"
+            t-att-selected="region.id === selectedRegion"
+          />
+        </t>
+      </select>
+    </Section>
+  </t>
+
   <t t-name="o-spreadsheet-LineConfigPanel">
     <div>
       <Section class="'pt-0'">
@@ -3741,7 +3895,8 @@
     <GeneralDesignEditor
       figureId="props.figureId"
       definition="props.definition"
-      updateChart="props.updateChart">
+      updateChart="props.updateChart"
+      defaultChartTitleFontSize="defaultScorecardTitleFontSize">
       <t t-set-slot="general-extension">
         <Section class="'pt-1'" title.translate="Number formatting">
           <Checkbox
@@ -3896,6 +4051,7 @@
   <t t-name="o-spreadsheet.Checkbox">
     <label
       class="o-checkbox d-flex align-items-center"
+      role="button"
       t-att-title="props.title"
       t-att-class="{'text-muted': props.disabled }"
       t-attf-class="{{props.className}}">
@@ -4247,6 +4403,7 @@
       <RoundColorPicker
         currentColor="colorNumberString(rule.color)"
         onColorPicked.bind="updateDataBarColor"
+        disableNoColor="true"
       />
       <div class="o-section-subtitle">Range of values</div>
       <SelectionInput
@@ -5111,6 +5268,7 @@
         </div>
       </t>
     </div>
+    <PivotSortSection definition="props.definition" pivotId="props.pivotId"/>
   </t>
 
   <t t-name="o-spreadsheet-PivotMeasureEditor">
@@ -5138,6 +5296,7 @@
             composerContent="measure.computedBy.formula"
             defaultRangeSheetId="measure.computedBy.sheetId"
             contextualAutocomplete="getMeasureAutocomplete()"
+            getContextualColoredSymbolToken.bind="getColoredSymbolToken"
           />
         </div>
       </div>
@@ -5161,6 +5320,24 @@
     </PivotDimension>
   </t>
 
+  <t t-name="o-spreadsheet-PivotSortSection">
+    <Section t-if="hasValidSort" class="'o-pivot-sort'">
+      <t t-set-slot="title">Sorting</t>
+      <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">
+            <t t-if="valueAndField.field">
+              <span class="fw-bolder" t-esc="valueAndField.field"/>
+              =
+            </t>
+            <span class="fw-bolder o-sort-value" t-esc="valueAndField.value"/>
+          </div>
+        </t>
+      </div>
+    </Section>
+  </t>
+
   <t t-name="o-spreadsheet-PivotMeasureDisplayPanel">
     <Section title.translate="Show measure as:">
       <select
@@ -5585,7 +5762,11 @@
         <input type="text" class="o-input" t-model="state.styleName"/>
       </Section>
       <Section class="'pt-1'" title.translate="Style color">
-        <RoundColorPicker currentColor="state.primaryColor" onColorPicked.bind="onColorPicked"/>
+        <RoundColorPicker
+          currentColor="state.primaryColor"
+          onColorPicked.bind="onColorPicked"
+          disableNoColor="true"
+        />
       </Section>
       <Section class="'pt-1'" title.translate="Style template">
         <div class="d-flex flex-wrap">
@@ -5841,9 +6022,10 @@
 
             <div class="o-divider"/>
             <FontSizeEditor
+              currentFontSize="currentFontSize"
+              onFontSizeChanged.bind="this.setFontSize"
               class="'o-hoverable-button'"
               onToggle.bind="this.onClick"
-              dropdownStyle="this.dropdownStyle"
             />
             <div class="o-divider"/>
 
@@ -5953,6 +6135,27 @@
         </div>
         <TopBarComposer/>
       </div>
+      <div
+        t-if="this.fingerprints.isEnabled"
+        class="irregularity-map d-flex align-items-center justify-content-between">
+        <div
+          t-on-click="() => this.fingerprints.disable()"
+          role="button"
+          title="This tool analyzes spreadsheet formulas for patterns and highlights inconsistencies. Irregularities may indicate potential errors in formula structures, references, or arguments. (Click to turn off)"
+          class="h-100 d-flex align-items-center text-info px-3">
+          <t t-call="o-spreadsheet-Icon.IRREGULARITY_MAP"/>
+          Irregularity map
+        </div>
+        <div
+          class="ps-3 h-100 flex-fill d-flex justify-content-between align-items-center rounded-0 alert alert-info ps-0 py-0 my-0">
+          This tool analyzes formulas for patterns and highlights
+          inconsistencies. Irregularities may indicate potential errors in formula
+          structures, references or arguments.
+          <div class="btn btn-link align-self-end" t-on-click="() => this.fingerprints.disable()">
+            Turn off
+          </div>
+        </div>
+      </div>
     </div>
     <Menu
       t-if="state.menuState.isOpen"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/o-spreadsheet",
-  "version": "18.1.0-alpha.6",
+  "version": "18.1.0-alpha.8",
   "description": "A spreadsheet component",
   "type": "module",
   "main": "dist/o-spreadsheet.cjs.js",
@@ -66,6 +66,7 @@
     "body-parser": "^1.19.0",
     "chart.js": "4.4.5",
     "chartjs-adapter-luxon": "^1.3.1",
+    "chartjs-chart-geo": "^4.3.2",
     "cors": "^2.8.5",
     "eslint": "^6.8.0",
     "express": "^4.17.1",
@@ -79,7 +80,7 @@
     "jszip": "^3.6.0",
     "lint-staged": "^12.1.2",
     "live-server": "^1.2.1",
-    "luxon": "^3.0.1",
+    "luxon": "^3.5.0",
     "minimist": "^1.2.8",
     "mockdate": "^3.0.2",
     "node-watch": "^0.7.3",