@odoo/o-spreadsheet 17.1.0-alpha.5 → 17.1.0-alpha.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/o-spreadsheet.cjs.js +1749 -772
  2. package/dist/o-spreadsheet.d.ts +860 -47
  3. package/dist/o-spreadsheet.esm.js +1749 -772
  4. package/dist/o-spreadsheet.iife.js +1749 -772
  5. package/dist/o-spreadsheet.iife.min.js +292 -286
  6. package/dist/o_spreadsheet.xml +339 -468
  7. package/package.json +8 -4
package/dist/o_spreadsheet.xml CHANGED
@@ -1,9 +1,9 @@
1
1
  <!--
2
2
  This file is generated by o-spreadsheet build tools. Do not edit it.
3
3
  @see https://github.com/odoo/o-spreadsheet
4
- @version 17.1.0-alpha.5
5
- @date 2023-12-05T09:52:13.900Z
6
- @hash c2823eb
4
+ @version 17.1.0-alpha.7
5
+ @date 2024-01-12T13:45:36.203Z
6
+ @hash cbce1ed
7
7
  -->
8
8
  <odoo>
9
9
  <t t-name="o-spreadsheet-ActionButton">
@@ -2579,111 +2579,61 @@ https://fontawesome.com/license -->
2579
2579
 
2580
2580
  <t t-name="o-spreadsheet-BarConfigPanel">
2581
2581
  <div>
2582
- <div class="o-section pt-0">
2583
- <label class="o-checkbox">
2584
- <input
2585
- type="checkbox"
2586
- name="stacked"
2587
- t-att-checked="props.definition.stacked"
2588
- t-on-change="onUpdateStacked"
2589
- class="align-middle"
2590
- />
2591
- Stacked barchart
2592
- </label>
2593
- </div>
2594
- <div class="o-section o-data-series">
2595
- <div class="o-section-title">Data Series</div>
2596
- <SelectionInput
2597
- ranges="() => this.getDataSeriesRanges()"
2598
- required="true"
2599
- onSelectionChanged="(ranges) => this.onDataSeriesRangesChanged(ranges)"
2600
- onSelectionConfirmed="() => this.onDataSeriesConfirmed()"
2582
+ <Section class="'pt-0'">
2583
+ <Checkbox
2584
+ name="'stacked'"
2585
+ label="stackedLabel"
2586
+ value="props.definition.stacked"
2587
+ onChange.bind="onUpdateStacked"
2601
2588
  />
2602
- </div>
2603
- <div class="o-section o-data-labels">
2604
- <div class="o-section-title">Categories / Labels</div>
2605
- <SelectionInput
2606
- ranges="() => [this.getLabelRange()]"
2607
- isInvalid="isLabelInvalid"
2608
- hasSingleRange="true"
2609
- onSelectionChanged="(ranges) => this.onLabelRangeChanged(ranges)"
2610
- onSelectionConfirmed="() => this.onLabelRangeConfirmed()"
2589
+ </Section>
2590
+ <ChartDataSeries
2591
+ ranges="() => this.getDataSeriesRanges()"
2592
+ onSelectionChanged="(ranges) => this.onDataSeriesRangesChanged(ranges)"
2593
+ onSelectionConfirmed="() => this.onDataSeriesConfirmed()"
2594
+ />
2595
+ <ChartLabelRange
2596
+ range="() => this.getLabelRange()"
2597
+ isInvalid="isLabelInvalid"
2598
+ onSelectionChanged="(ranges) => this.onLabelRangeChanged(ranges)"
2599
+ onSelectionConfirmed="() => this.onLabelRangeConfirmed()"
2600
+ options="this.getLabelRangeOptions()"
2601
+ />
2602
+ <Section class="'o-use-row-as-headers'" t-if="calculateHeaderPosition()">
2603
+ <Checkbox
2604
+ name="'dataSetsHaveTitle'"
2605
+ label="dataSetsHaveTitleLabel"
2606
+ value="props.definition.dataSetsHaveTitle"
2607
+ onChange.bind="onUpdateDataSetsHaveTitle"
2611
2608
  />
2612
- <label class="o-checkbox">
2613
- <input
2614
- type="checkbox"
2615
- name="aggregated"
2616
- t-att-checked="props.definition.aggregated"
2617
- t-on-change="onUpdateAggregated"
2618
- class="align-middle"
2619
- />
2620
- Aggregate
2621
- </label>
2622
- </div>
2623
- <div class="o-section o-use-row-as-headers" t-if="calculateHeaderPosition()">
2624
- <label class="o-checkbox">
2625
- <input
2626
- type="checkbox"
2627
- t-att-checked="props.definition.dataSetsHaveTitle"
2628
- t-on-change="onUpdateDataSetsHaveTitle"
2629
- class="align-middle"
2630
- />
2631
- <span>
2632
- Use row
2633
- <t t-esc="calculateHeaderPosition()"/>
2634
- as headers
2635
- </span>
2636
- </label>
2637
- </div>
2609
+ </Section>
2638
2610
 
2639
- <div class="o-section" t-if="errorMessages.length">
2640
- <ValidationMessages messages="errorMessages" msgType="'error'"/>
2641
- </div>
2611
+ <ChartErrorSection t-if="errorMessages.length" messages="errorMessages"/>
2642
2612
  </div>
2643
2613
  </t>
2644
2614
 
2645
2615
  <t t-name="o-spreadsheet-BarChartDesignPanel">
2646
- <t t-set="background_color">Background Color</t>
2647
2616
  <div>
2648
- <div class="o-section o-chart-background-color">
2649
- <div class="o-section-title">Background color</div>
2650
- <div class="d-flex align-items-center">
2651
- <span class="pe-1">Select a color...</span>
2652
- <ColorPickerWidget
2653
- currentColor="props.definition.background"
2654
- toggleColorPicker="() => this.toggleColorPicker()"
2655
- showColorPicker="state.fillColorTool"
2656
- onColorPicked="(color) => this.updateBackgroundColor(color)"
2657
- title="background_color"
2658
- icon="'o-spreadsheet-Icon.FILL_COLOR'"
2659
- />
2660
- </div>
2661
- </div>
2662
- <div class="o-section o-chart-title">
2663
- <div class="o-section-title">Title</div>
2664
- <input
2665
- type="text"
2666
- t-model="state.title"
2667
- t-on-change="updateTitle"
2668
- class="o-input o-optional"
2669
- placeholder="New Chart"
2670
- />
2671
- </div>
2672
- <div class="o-section">
2673
- <div class="o-section-title">Vertical axis position</div>
2617
+ <ChartColor
2618
+ currentColor="props.definition.background"
2619
+ onColorPicked.bind="updateBackgroundColor"
2620
+ />
2621
+ <ChartTitle title="title" update.bind="updateTitle"/>
2622
+ <Section>
2623
+ <t t-set-slot="title">Vertical axis position</t>
2674
2624
  <select
2675
2625
  t-att-value="props.definition.verticalAxisPosition"
2676
- class="o-input o-type-selector"
2626
+ class="o-input"
2677
2627
  t-on-change="(ev) => this.updateSelect('verticalAxisPosition', ev)">
2678
2628
  <option value="left">Left</option>
2679
2629
  <option value="right">Right</option>
2680
2630
  </select>
2681
- </div>
2682
- <div class="o-section">
2683
- <div class="o-section-title">Legend position</div>
2631
+ </Section>
2632
+ <Section>
2633
+ <t t-set-slot="title">Legend position</t>
2684
2634
  <select
2685
2635
  t-att-value="props.definition.legendPosition"
2686
- class="o-input o-type-selector"
2636
+ class="o-input"
2687
2637
  t-on-change="(ev) => this.updateSelect('legendPosition', ev)">
2688
2638
  <option value="none">None</option>
2689
2639
  <option value="top">Top</option>
@@ -2691,61 +2641,108 @@ https://fontawesome.com/license -->
2691
2641
  <option value="left">Left</option>
2692
2642
  <option value="right">Right</option>
2693
2643
  </select>
2694
- </div>
2644
+ </Section>
2695
2645
  </div>
2696
2646
  </t>
2697
2647
 
2698
- <t t-name="o-spreadsheet-GaugeChartConfigPanel">
2699
- <div>
2700
- <div class="o-section o-data-series">
2701
- <div class="o-section-title">Data range</div>
2702
- <SelectionInput
2703
- ranges="() => [this.getDataRange()]"
2704
- isInvalid="isDataRangeInvalid"
2705
- hasSingleRange="true"
2706
- required="true"
2707
- onSelectionChanged="(ranges) => this.onDataRangeChanged(ranges)"
2708
- onSelectionConfirmed="() => this.updateDataRange()"
2648
+ <t t-name="o-spreadsheet.ChartColor">
2649
+ <Section class="'o-chart-background-color'">
2650
+ <t t-set-slot="title">Background color</t>
2651
+ <div class="d-flex align-items-center">
2652
+ <span class="pe-1">Select a color...</span>
2653
+ <t t-set="background_color">Background color</t>
2654
+ <ColorPickerWidget
2655
+ currentColor="props.currentColor"
2656
+ showColorPicker="state.pickerOpened"
2657
+ toggleColorPicker.bind="togglePicker"
2658
+ onColorPicked="props.onColorPicked"
2659
+ title="background_color"
2660
+ icon="'o-spreadsheet-Icon.FILL_COLOR'"
2709
2661
  />
2710
2662
  </div>
2663
+ </Section>
2664
+ </t>
2665
+
2666
+ <t t-name="o-spreadsheet.ChartDataSeries">
2667
+ <Section class="'o-data-series'">
2668
+ <t t-set-slot="title" t-esc="title"/>
2669
+ <SelectionInput
2670
+ ranges="() => props.ranges()"
2671
+ required="true"
2672
+ hasSingleRange="props.hasSingleRange"
2673
+ onSelectionChanged="(ranges) => props.onSelectionChanged(ranges)"
2674
+ onSelectionConfirmed="() => props.onSelectionConfirmed()"
2675
+ />
2676
+ </Section>
2677
+ </t>
2711
2678
 
2712
- <div class="o-section" t-if="configurationErrorMessages.length">
2713
- <ValidationMessages messages="configurationErrorMessages" msgType="'error'"/>
2714
- </div>
2715
- </div>
2679
+ <t t-name="o-spreadsheet.ChartErrorSection">
2680
+ <Section>
2681
+ <ValidationMessages messages="props.messages" msgType="'error'"/>
2682
+ </Section>
2716
2683
  </t>
2717
2684
 
2718
- <t t-name="o-spreadsheet-GaugeChartDesignPanel">
2719
- <t t-set="background_color">Background Color</t>
2685
+ <t t-name="o-spreadsheet.ChartLabelRange">
2686
+ <Section class="'o-data-labels'">
2687
+ <t t-set-slot="title" t-esc="props.title"/>
2688
+ <SelectionInput
2689
+ ranges="() => [props.range()]"
2690
+ isInvalid="props.isInvalid"
2691
+ hasSingleRange="true"
2692
+ required="props.required"
2693
+ onSelectionChanged="(ranges) => props.onSelectionChanged(ranges)"
2694
+ onSelectionConfirmed="() => props.onSelectionConfirmed()"
2695
+ />
2696
+ <t t-foreach="props.options" t-as="option" t-key="option.name">
2697
+ <Checkbox
2698
+ name="option.name"
2699
+ label="option.label"
2700
+ value="option.value"
2701
+ onChange="option.onChange"
2702
+ />
2703
+ </t>
2704
+ </Section>
2705
+ </t>
2706
+
2707
+ <t t-name="o-spreadsheet.ChartTitle">
2708
+ <t t-set="placeholder">New Chart</t>
2709
+ <Section class="'o-chart-title'">
2710
+ <t t-set-slot="title">Title</t>
2711
+ <input
2712
+ type="text"
2713
+ class="o-input o-optional"
2714
+ t-att-value="props.title"
2715
+ t-on-change="updateTitle"
2716
+ t-att-placeholder="placeholder"
2717
+ />
2718
+ </Section>
2719
+ </t>
2720
+
2721
+ <t t-name="o-spreadsheet-GaugeChartConfigPanel">
2720
2722
  <div>
2721
- <div class="o-section o-chart-background-color">
2722
- <div class="o-section-title">Background color</div>
2723
- <div class="d-flex align-items-center">
2724
- <span class="pe-1">Select a color...</span>
2725
- <ColorPickerWidget
2726
- currentColor="props.definition.background"
2727
- toggleColorPicker="() => this.toggleMenu('backgroundColor', ev)"
2728
- showColorPicker="state.openedMenu === 'backgroundColor'"
2729
- onColorPicked="(color) => this.updateBackgroundColor(color)"
2730
- title="background_color"
2731
- icon="'o-spreadsheet-Icon.FILL_COLOR'"
2732
- />
2733
- </div>
2734
- </div>
2723
+ <ChartDataSeries
2724
+ ranges="() => [this.getDataRange()]"
2725
+ onSelectionChanged="(ranges) => this.onDataRangeChanged(ranges)"
2726
+ onSelectionConfirmed="() => this.updateDataRange()"
2727
+ hasSingleRange="true"
2728
+ />
2735
2729
 
2736
- <div class="o-section o-chart-title">
2737
- <div class="o-section-title">Title</div>
2738
- <input
2739
- type="text"
2740
- t-model="state.title"
2741
- t-on-change="updateTitle"
2742
- class="o-input o-optional"
2743
- placeholder="New Chart"
2744
- />
2745
- </div>
2730
+ <ChartErrorSection
2731
+ t-if="configurationErrorMessages.length"
2732
+ messages="configurationErrorMessages"
2733
+ />
2734
+ </div>
2735
+ </t>
2746
2736
 
2747
- <div class="o-section">
2748
- <div class="o-section-title">Range</div>
2737
+ <t t-name="o-spreadsheet-GaugeChartDesignPanel">
2738
+ <div>
2739
+ <ChartColor
2740
+ currentColor="props.definition.background"
2741
+ onColorPicked.bind="updateBackgroundColor"
2742
+ />
2743
+ <ChartTitle title="title" update.bind="updateTitle"/>
2744
+ <Section>
2745
+ <t t-set-slot="title">Range</t>
2749
2746
  <div class="o-subsection-left">
2750
2747
  <input
2751
2748
  type="text"
@@ -2766,18 +2763,16 @@ https://fontawesome.com/license -->
2766
2763
  t-att-class="{ 'o-invalid': isRangeMaxInvalid() }"
2767
2764
  />
2768
2765
  </div>
2769
- </div>
2766
+ </Section>
2770
2767
 
2771
- <div class="o-section">
2772
- <div class="o-section-title">Thresholds</div>
2768
+ <Section>
2769
+ <t t-set-slot="title">Thresholds</t>
2773
2770
  <t t-call="o-spreadsheet-GaugeChartColorSectionTemplate">
2774
2771
  <t t-set="sectionRule" t-value="state.sectionRule"/>
2775
2772
  </t>
2776
- </div>
2773
+ </Section>
2777
2774
 
2778
- <div class="o-section" t-if="designErrorMessages.length">
2779
- <ValidationMessages messages="designErrorMessages" msgType="'error'"/>
2780
- </div>
2775
+ <ChartErrorSection t-if="designErrorMessages.length" messages="designErrorMessages"/>
2781
2776
  </div>
2782
2777
  </t>
2783
2778
 
@@ -2864,89 +2859,43 @@ https://fontawesome.com/license -->
2864
2859
 
2865
2860
  <t t-name="o-spreadsheet-LineBarPieConfigPanel">
2866
2861
  <div>
2867
- <div class="o-section o-data-series">
2868
- <div class="o-section-title">Data Series</div>
2869
- <SelectionInput
2870
- ranges="() => this.getDataSeriesRanges()"
2871
- required="true"
2872
- onSelectionChanged="(ranges) => this.onDataSeriesRangesChanged(ranges)"
2873
- onSelectionConfirmed="() => this.onDataSeriesConfirmed()"
2874
- />
2875
- </div>
2876
- <div class="o-section o-data-labels">
2877
- <div class="o-section-title">Categories / Labels</div>
2878
- <SelectionInput
2879
- ranges="() => [this.getLabelRange()]"
2880
- isInvalid="isLabelInvalid"
2881
- hasSingleRange="true"
2882
- onSelectionChanged="(ranges) => this.onLabelRangeChanged(ranges)"
2883
- onSelectionConfirmed="() => this.onLabelRangeConfirmed()"
2862
+ <ChartDataSeries
2863
+ ranges="() => this.getDataSeriesRanges()"
2864
+ onSelectionChanged="(ranges) => this.onDataSeriesRangesChanged(ranges)"
2865
+ onSelectionConfirmed="() => this.onDataSeriesConfirmed()"
2866
+ />
2867
+ <ChartLabelRange
2868
+ range="() => this.getLabelRange()"
2869
+ isInvalid="isLabelInvalid"
2870
+ onSelectionChanged="(ranges) => this.onLabelRangeChanged(ranges)"
2871
+ onSelectionConfirmed="() => this.onLabelRangeConfirmed()"
2872
+ options="this.getLabelRangeOptions()"
2873
+ />
2874
+ <Section class="'o-use-row-as-headers'" t-if="calculateHeaderPosition()">
2875
+ <Checkbox
2876
+ name="'dataSetsHaveTitle'"
2877
+ label="dataSetsHaveTitleLabel"
2878
+ value="props.definition.dataSetsHaveTitle"
2879
+ onChange.bind="onUpdateDataSetsHaveTitle"
2884
2880
  />
2885
- <label class="o-checkbox">
2886
- <input
2887
- type="checkbox"
2888
- name="aggregated"
2889
- t-att-checked="props.definition.aggregated"
2890
- t-on-change="onUpdateAggregated"
2891
- class="align-middle"
2892
- />
2893
- Aggregate
2894
- </label>
2895
- </div>
2896
- <div class="o-section o-use-row-as-headers" t-if="calculateHeaderPosition()">
2897
- <label class="o-checkbox">
2898
- <input
2899
- type="checkbox"
2900
- t-att-checked="props.definition.dataSetsHaveTitle"
2901
- t-on-change="onUpdateDataSetsHaveTitle"
2902
- class="align-middle"
2903
- />
2904
- <span>
2905
- Use row
2906
- <t t-esc="calculateHeaderPosition()"/>
2907
- as headers
2908
- </span>
2909
- </label>
2910
- </div>
2881
+ </Section>
2911
2882
 
2912
- <div class="o-section" t-if="errorMessages.length">
2913
- <ValidationMessages messages="errorMessages" msgType="'error'"/>
2914
- </div>
2883
+ <ChartErrorSection t-if="errorMessages.length" messages="errorMessages"/>
2915
2884
  </div>
2916
2885
  </t>
2917
2886
 
2918
2887
  <t t-name="o-spreadsheet-LineBarPieDesignPanel">
2919
- <t t-set="background_color">Background Color</t>
2920
2888
  <div>
2921
- <div class="o-section o-chart-background-color">
2922
- <div class="o-section-title">Background color</div>
2923
- <div class="d-flex align-items-center">
2924
- <span class="pe-1">Select a color...</span>
2925
- <ColorPickerWidget
2926
- currentColor="props.definition.background"
2927
- toggleColorPicker="() => this.toggleColorPicker()"
2928
- showColorPicker="state.fillColorTool"
2929
- onColorPicked="(color) => this.updateBackgroundColor(color)"
2930
- title="background_color"
2931
- icon="'o-spreadsheet-Icon.FILL_COLOR'"
2932
- />
2933
- </div>
2934
- </div>
2935
- <div class="o-section o-chart-title">
2936
- <div class="o-section-title">Title</div>
2937
- <input
2938
- type="text"
2939
- t-model="state.title"
2940
- t-on-change="updateTitle"
2941
- class="o-input o-optional"
2942
- placeholder="New Chart"
2943
- />
2944
- </div>
2945
- <div class="o-section">
2946
- <div class="o-section-title">Legend position</div>
2889
+ <ChartColor
2890
+ currentColor="props.definition.background"
2891
+ onColorPicked.bind="updateBackgroundColor"
2892
+ />
2893
+ <ChartTitle title="title" update.bind="updateTitle"/>
2894
+ <Section>
2895
+ <t t-set-slot="title">Legend position</t>
2947
2896
  <select
2948
2897
  t-att-value="props.definition.legendPosition"
2949
- class="o-input o-type-selector"
2898
+ class="o-input"
2950
2899
  t-on-change="(ev) => this.updateSelect('legendPosition', ev)">
2951
2900
  <option value="none">None</option>
2952
2901
  <option value="top">Top</option>
@@ -2954,136 +2903,73 @@ https://fontawesome.com/license -->
2954
2903
  <option value="left">Left</option>
2955
2904
  <option value="right">Right</option>
2956
2905
  </select>
2957
- </div>
2906
+ </Section>
2958
2907
  </div>
2959
2908
  </t>
2960
2909
 
2961
2910
  <t t-name="o-spreadsheet-LineConfigPanel">
2962
2911
  <div>
2963
- <div class="o-section pt-0">
2964
- <label class="o-checkbox">
2965
- <input
2966
- type="checkbox"
2967
- name="stacked"
2968
- t-att-checked="props.definition.stacked"
2969
- t-on-change="onUpdateStacked"
2970
- class="align-middle"
2971
- />
2972
- Stacked linechart
2973
- </label>
2974
- <label class="o-checkbox">
2975
- <input
2976
- type="checkbox"
2977
- name="cumulative"
2978
- t-att-checked="props.definition.cumulative"
2979
- t-on-change="onUpdateCumulative"
2980
- class="align-middle"
2981
- />
2982
- Cumulative data
2983
- </label>
2984
- </div>
2985
- <div class="o-section o-data-series">
2986
- <div class="o-section-title">Data Series</div>
2987
- <SelectionInput
2988
- ranges="() => this.getDataSeriesRanges()"
2989
- required="true"
2990
- onSelectionChanged="(ranges) => this.onDataSeriesRangesChanged(ranges)"
2991
- onSelectionConfirmed="() => this.onDataSeriesConfirmed()"
2912
+ <Section class="'pt-0'">
2913
+ <Checkbox
2914
+ name="'stacked'"
2915
+ label="stackedLabel"
2916
+ value="props.definition.stacked"
2917
+ onChange.bind="onUpdateStacked"
2992
2918
  />
2993
- </div>
2994
- <div class="o-section o-data-labels">
2995
- <div class="o-section-title">Categories / Labels</div>
2996
- <SelectionInput
2997
- ranges="() => [this.getLabelRange()]"
2998
- isInvalid="isLabelInvalid"
2999
- hasSingleRange="true"
3000
- onSelectionChanged="(ranges) => this.onLabelRangeChanged(ranges)"
3001
- onSelectionConfirmed="() => this.onLabelRangeConfirmed()"
2919
+ <Checkbox
2920
+ name="'cumulative'"
2921
+ label="cumulativeLabel"
2922
+ value="props.definition.cumulative"
2923
+ onChange.bind="onUpdateCumulative"
3002
2924
  />
3003
- <label class="o-checkbox">
3004
- <input
3005
- type="checkbox"
3006
- name="aggregated"
3007
- t-att-checked="props.definition.aggregated"
3008
- t-on-change="onUpdateAggregated"
3009
- class="align-middle"
3010
- />
3011
- Aggregate
3012
- </label>
3013
- <label t-if="canTreatLabelsAsText" class="o-checkbox">
3014
- <input
3015
- type="checkbox"
3016
- name="labelsAsText"
3017
- t-att-checked="props.definition.labelsAsText"
3018
- t-on-change="onUpdateLabelsAsText"
3019
- />
3020
- Treat labels as text
3021
- </label>
3022
- </div>
3023
- <div class="o-section o-use-row-as-headers" t-if="calculateHeaderPosition()">
3024
- <label class="o-checkbox">
3025
- <input
3026
- type="checkbox"
3027
- t-att-checked="props.definition.dataSetsHaveTitle"
3028
- t-on-change="onUpdateDataSetsHaveTitle"
3029
- class="align-middle"
3030
- />
3031
- <span>
3032
- Use row
3033
- <t t-esc="calculateHeaderPosition()"/>
3034
- as headers
3035
- </span>
3036
- </label>
3037
- </div>
2925
+ </Section>
2926
+ <ChartDataSeries
2927
+ ranges="() => this.getDataSeriesRanges()"
2928
+ onSelectionChanged="(ranges) => this.onDataSeriesRangesChanged(ranges)"
2929
+ onSelectionConfirmed="() => this.onDataSeriesConfirmed()"
2930
+ />
2931
+ <ChartLabelRange
2932
+ range="() => this.getLabelRange()"
2933
+ isInvalid="isLabelInvalid"
2934
+ onSelectionChanged="(ranges) => this.onLabelRangeChanged(ranges)"
2935
+ onSelectionConfirmed="() => this.onLabelRangeConfirmed()"
2936
+ options="this.getLabelRangeOptions()"
2937
+ />
2938
+ <Section class="'o-use-row-as-headers'" t-if="calculateHeaderPosition()">
2939
+ <Checkbox
2940
+ name="'dataSetsHaveTitle'"
2941
+ label="dataSetsHaveTitleLabel"
2942
+ value="props.definition.dataSetsHaveTitle"
2943
+ onChange.bind="onUpdateDataSetsHaveTitle"
2944
+ />
2945
+ </Section>
3038
2946
 
3039
- <div class="o-section" t-if="errorMessages.length">
3040
- <ValidationMessages messages="errorMessages" msgType="'error'"/>
3041
- </div>
2947
+ <ChartErrorSection t-if="errorMessages.length" messages="errorMessages"/>
3042
2948
  </div>
3043
2949
  </t>
3044
2950
 
3045
2951
  <t t-name="o-spreadsheet-LineChartDesignPanel">
3046
- <t t-set="background_color">Background Color</t>
3047
2952
  <div>
3048
- <div class="o-section o-chart-background-color">
3049
- <div class="o-section-title">Background color</div>
3050
- <div class="d-flex align-items-center">
3051
- <span class="pe-1">Select a color...</span>
3052
- <ColorPickerWidget
3053
- currentColor="props.definition.background"
3054
- toggleColorPicker="() => this.toggleColorPicker()"
3055
- showColorPicker="state.fillColorTool"
3056
- onColorPicked="(color) => this.updateBackgroundColor(color)"
3057
- title="background_color"
3058
- icon="'o-spreadsheet-Icon.FILL_COLOR'"
3059
- />
3060
- </div>
3061
- </div>
3062
- <div class="o-section o-chart-title">
3063
- <div class="o-section-title">Title</div>
3064
- <input
3065
- type="text"
3066
- t-model="state.title"
3067
- t-on-change="updateTitle"
3068
- class="o-input o-optional"
3069
- placeholder="New Chart"
3070
- />
3071
- </div>
3072
- <div class="o-section">
3073
- <div class="o-section-title">Vertical axis position</div>
2953
+ <ChartColor
2954
+ currentColor="props.definition.background"
2955
+ onColorPicked.bind="updateBackgroundColor"
2956
+ />
2957
+ <ChartTitle title="title" update.bind="updateTitle"/>
2958
+ <Section>
2959
+ <t t-set-slot="title">Vertical axis position</t>
3074
2960
  <select
3075
2961
  t-att-value="props.definition.verticalAxisPosition"
3076
- class="o-input o-type-selector"
2962
+ class="o-input"
3077
2963
  t-on-change="(ev) => this.updateSelect('verticalAxisPosition', ev)">
3078
2964
  <option value="left">Left</option>
3079
2965
  <option value="right">Right</option>
3080
2966
  </select>
3081
- </div>
3082
- <div class="o-section">
3083
- <div class="o-section-title">Legend position</div>
2967
+ </Section>
2968
+ <Section>
2969
+ <t t-set-slot="title">Legend position</t>
3084
2970
  <select
3085
2971
  t-att-value="props.definition.legendPosition"
3086
- class="o-input o-type-selector"
2972
+ class="o-input"
3087
2973
  t-on-change="(ev) => this.updateSelect('legendPosition', ev)">
3088
2974
  <option value="none">None</option>
3089
2975
  <option value="top">Top</option>
@@ -3091,7 +2977,7 @@ https://fontawesome.com/license -->
3091
2977
  <option value="left">Left</option>
3092
2978
  <option value="right">Right</option>
3093
2979
  </select>
3094
- </div>
2980
+ </Section>
3095
2981
  </div>
3096
2982
  </t>
3097
2983
 
@@ -3116,8 +3002,8 @@ https://fontawesome.com/license -->
3116
3002
 
3117
3003
  <t t-set="definition" t-value="getChartDefinition()"/>
3118
3004
  <t t-if="state.panel === 'configuration'">
3119
- <div class="o-section">
3120
- <div class="o-section-title">Chart type</div>
3005
+ <Section>
3006
+ <t t-set-slot="title">Chart type</t>
3121
3007
  <t t-set="types" t-value="chartTypes"/>
3122
3008
  <select
3123
3009
  class="o-input o-type-selector"
@@ -3131,7 +3017,7 @@ https://fontawesome.com/license -->
3131
3017
  t-att-selected="definition.type === type"
3132
3018
  />
3133
3019
  </select>
3134
- </div>
3020
+ </Section>
3135
3021
  <t
3136
3022
  t-component="chartPanel.configuration"
3137
3023
  definition="definition"
@@ -3156,8 +3042,8 @@ https://fontawesome.com/license -->
3156
3042
 
3157
3043
  <t t-name="o-spreadsheet-ScorecardChartConfigPanel">
3158
3044
  <div>
3159
- <div class="o-section o-data-series">
3160
- <div class="o-section-title">Key value</div>
3045
+ <Section class="'o-data-series'">
3046
+ <t t-set-slot="title">Key value</t>
3161
3047
  <SelectionInput
3162
3048
  ranges="() => [this.getKeyValueRange()]"
3163
3049
  isInvalid="isKeyValueInvalid"
@@ -3166,9 +3052,9 @@ https://fontawesome.com/license -->
3166
3052
  onSelectionChanged="(ranges) => this.onKeyValueRangeChanged(ranges)"
3167
3053
  onSelectionConfirmed="() => this.updateKeyValueRange()"
3168
3054
  />
3169
- </div>
3170
- <div class="o-section o-data-labels">
3171
- <div class="o-section-title">Baseline configuration</div>
3055
+ </Section>
3056
+ <Section class="'o-data-labels'">
3057
+ <t t-set-slot="title">Baseline configuration</t>
3172
3058
  <div class="o-section-subtitle">Baseline value</div>
3173
3059
  <SelectionInput
3174
3060
  ranges="() => [this.getBaselineRange()]"
@@ -3180,62 +3066,39 @@ https://fontawesome.com/license -->
3180
3066
  <div class="o-section-subtitle">Baseline format</div>
3181
3067
  <select
3182
3068
  t-att-value="props.definition.baselineMode"
3183
- class="o-input o-type-selector o-optional"
3069
+ class="o-input o-optional"
3184
3070
  t-on-change="(ev) => this.updateBaselineMode(ev)">
3185
3071
  <option value="text">Absolute value</option>
3186
3072
  <option value="difference">Value change from key value</option>
3187
3073
  <option value="percentage">Percentage change from key value</option>
3188
3074
  </select>
3189
- </div>
3075
+ </Section>
3190
3076
 
3191
- <div class="o-section" t-if="errorMessages.length">
3192
- <ValidationMessages messages="errorMessages" msgType="'error'"/>
3193
- </div>
3077
+ <ChartErrorSection t-if="errorMessages.length" messages="errorMessages"/>
3194
3078
  </div>
3195
3079
  </t>
3196
3080
 
3197
3081
  <t t-name="o-spreadsheet-ScorecardChartDesignPanel">
3198
- <t t-set="background_color">Background Color</t>
3199
3082
  <t t-set="color_up">Color Up</t>
3200
3083
  <t t-set="color_down">Color Down</t>
3201
3084
  <div>
3202
- <div class="o-section o-chart-background-color">
3203
- <div class="o-section-title">Background color</div>
3204
- <div class="d-flex align-items-center">
3205
- <span class="pe-1">Select a color...</span>
3206
- <ColorPickerWidget
3207
- currentColor="props.definition.background"
3208
- toggleColorPicker="() => this.toggleColorPicker('backgroundColor')"
3209
- showColorPicker="state.openedColorPicker === 'backgroundColor'"
3210
- onColorPicked="(color) => this.setColor(color, 'backgroundColor')"
3211
- title="background_color"
3212
- icon="'o-spreadsheet-Icon.FILL_COLOR'"
3213
- />
3214
- </div>
3215
- </div>
3216
-
3217
- <div class="o-section o-chart-title">
3218
- <div class="o-section-title">Title</div>
3219
- <input
3220
- type="text"
3221
- t-model="state.title"
3222
- t-on-change="updateTitle"
3223
- class="o-input o-optional"
3224
- placeholder="New Chart"
3225
- />
3226
- </div>
3227
- <div class="o-section">
3228
- <div class="o-section-title">Baseline description</div>
3085
+ <ChartColor
3086
+ currentColor="props.definition.background"
3087
+ onColorPicked="(color) => this.setColor(color, 'backgroundColor')"
3088
+ />
3089
+ <ChartTitle title="title" update.bind="updateTitle"/>
3090
+ <Section>
3091
+ <t t-set-slot="title">Baseline description</t>
3229
3092
  <input
3230
3093
  type="text"
3231
3094
  t-att-value="translate(props.definition.baselineDescr)"
3232
3095
  t-on-change="updateBaselineDescr"
3233
3096
  class="o-input o-optional"
3234
3097
  />
3235
- </div>
3098
+ </Section>
3236
3099
  </div>
3237
- <div class="o-section o-chart-baseline-color">
3238
- <div class="o-section-title">Baseline color</div>
3100
+ <Section class="'o-chart-baseline-color'">
3101
+ <t t-set-slot="title">Baseline color</t>
3239
3102
  <div class="d-flex align-items-center">
3240
3103
  <span class="pe-1">Color on value increase</span>
3241
3104
  <ColorPickerWidget
@@ -3258,6 +3121,30 @@ https://fontawesome.com/license -->
3258
3121
  icon="'o-spreadsheet-Icon.FILL_COLOR'"
3259
3122
  />
3260
3123
  </div>
3124
+ </Section>
3125
+ </t>
3126
+
3127
+ <t t-name="o-spreadsheet.Checkbox">
3128
+ <label class="o-checkbox">
3129
+ <input
3130
+ type="checkbox"
3131
+ t-att-name="props.name"
3132
+ t-att-checked="props.value"
3133
+ t-on-change="onChange"
3134
+ class="align-middle"
3135
+ />
3136
+ <t t-if="props.label" t-esc="props.label"/>
3137
+ </label>
3138
+ </t>
3139
+
3140
+ <t t-name="o_spreadsheet.Section">
3141
+ <div class="o-section" t-att-class="props.class">
3142
+ <t t-if="props.slots.title">
3143
+ <div class="o-section-title">
3144
+ <t t-slot="title"/>
3145
+ </div>
3146
+ </t>
3147
+ <t t-slot="default"/>
3261
3148
  </div>
3262
3149
  </t>
3263
3150
 
@@ -3364,8 +3251,8 @@ https://fontawesome.com/license -->
3364
3251
 
3365
3252
  <t t-name="o-spreadsheet-ConditionalFormattingEditor">
3366
3253
  <div class="o-cf-ruleEditor">
3367
- <div class="o-section o-cf-range">
3368
- <div class="o-section-title">Apply to range</div>
3254
+ <Section class="'o-cf-range'">
3255
+ <t t-set-slot="title">Apply to range</t>
3369
3256
  <div class="o-selection-cf">
3370
3257
  <SelectionInput
3371
3258
  ranges="() => state.currentCF.ranges"
@@ -3418,8 +3305,8 @@ https://fontawesome.com/license -->
3418
3305
  <label for="iconSetRule" class="form-check-label o_form_label">Icon set</label>
3419
3306
  </div>
3420
3307
  </div>
3421
- </div>
3422
- <div class="o-section o-cf-editor">
3308
+ </Section>
3309
+ <Section class="'o-cf-editor'">
3423
3310
  <t t-if="state.currentCFType === 'CellIsRule'" t-call="o-spreadsheet-CellIsRuleEditor">
3424
3311
  <t t-set="rule" t-value="state.rules.cellIs"/>
3425
3312
  </t>
@@ -3437,12 +3324,12 @@ https://fontawesome.com/license -->
3437
3324
  Save
3438
3325
  </button>
3439
3326
  </div>
3440
- </div>
3441
- <div class="o-section">
3327
+ </Section>
3328
+ <Section>
3442
3329
  <div class="o-cf-error" t-foreach="state.errors || []" t-as="error" t-key="error_index">
3443
3330
  <t t-esc="errorMessage(error)"/>
3444
3331
  </div>
3445
- </div>
3332
+ </Section>
3446
3333
  </div>
3447
3334
  </t>
3448
3335
 
@@ -3716,8 +3603,8 @@ https://fontawesome.com/license -->
3716
3603
 
3717
3604
  <t t-name="o-spreadsheet-CustomCurrencyPanel">
3718
3605
  <div class="o-custom-currency">
3719
- <div class="o-section" t-if="availableCurrencies.length > 1">
3720
- <div class="o-section-title">Currency</div>
3606
+ <Section t-if="availableCurrencies.length > 1">
3607
+ <t t-set-slot="title">Currency</t>
3721
3608
  <select
3722
3609
  class="o-input o-available-currencies"
3723
3610
  t-on-change="(ev) => this.updateSelectCurrency(ev)">
@@ -3729,8 +3616,8 @@ https://fontawesome.com/license -->
3729
3616
  />
3730
3617
  </t>
3731
3618
  </select>
3732
- </div>
3733
- <div class="o-section">
3619
+ </Section>
3620
+ <Section>
3734
3621
  <div class="o-subsection-left">
3735
3622
  <div class="o-section-title">Code</div>
3736
3623
  <input
@@ -3749,9 +3636,9 @@ https://fontawesome.com/license -->
3749
3636
  t-on-input="(ev) => this.updateSymbol(ev)"
3750
3637
  />
3751
3638
  </div>
3752
- </div>
3753
- <div class="o-section">
3754
- <div class="o-section-title">Format</div>
3639
+ </Section>
3640
+ <Section>
3641
+ <t t-set-slot="title">Format</t>
3755
3642
  <select
3756
3643
  class="o-input o-format-proposals"
3757
3644
  t-on-change="(ev) => this.updateSelectFormat(ev)"
@@ -3764,7 +3651,7 @@ https://fontawesome.com/license -->
3764
3651
  />
3765
3652
  </t>
3766
3653
  </select>
3767
- </div>
3654
+ </Section>
3768
3655
  <div class="o-sidePanelButtons">
3769
3656
  <button
3770
3657
  class="o-button"
@@ -3918,8 +3805,8 @@ https://fontawesome.com/license -->
3918
3805
 
3919
3806
  <t t-name="o-spreadsheet-DataValidationEditor">
3920
3807
  <div class="o-dv-form w-100 h-100">
3921
- <div class="o-section o-dv-range">
3922
- <div class="o-section-title">Apply to range</div>
3808
+ <Section class="'o-dv-range'">
3809
+ <t t-set-slot="title">Apply to range</t>
3923
3810
  <SelectionInput
3924
3811
  ranges="() => state.rule.ranges"
3925
3812
  onSelectionChanged="(ranges) => this.onRangesChanged(ranges)"
@@ -3942,15 +3829,15 @@ https://fontawesome.com/license -->
3942
3829
  onCriterionChanged.bind="onCriterionChanged"
3943
3830
  />
3944
3831
  </div>
3945
- </div>
3832
+ </Section>
3946
3833
 
3947
- <div class="o-section o-dv-invalid-option">
3948
- <div class="o-section-title">If the data is invalid</div>
3834
+ <Section class="'o-dv-invalid-option'">
3835
+ <t t-set-slot="title">If the data is invalid</t>
3949
3836
  <select class="o-dv-reject-input o-input" t-on-change="changeRuleIsBlocking">
3950
3837
  <option t-att-selected="!state.rule.isBlocking" value="false">Show a warning</option>
3951
3838
  <option t-att-selected="state.rule.isBlocking" value="true">Reject the input</option>
3952
3839
  </select>
3953
- </div>
3840
+ </Section>
3954
3841
 
3955
3842
  <div class="o-sidePanelButtons">
3956
3843
  <button t-on-click="props.onExit" class="o-dv-cancel o-button">Cancel</button>
@@ -3982,8 +3869,8 @@ https://fontawesome.com/license -->
3982
3869
 
3983
3870
  <t t-name="o-spreadsheet-FindAndReplacePanel">
3984
3871
  <div class="o-find-and-replace">
3985
- <div class="o-section">
3986
- <div class="o-section-title">Search</div>
3872
+ <Section>
3873
+ <t t-set-slot="title">Search</t>
3987
3874
  <div class="o-input-search-container">
3988
3875
  <input
3989
3876
  type="text"
@@ -4018,30 +3905,24 @@ https://fontawesome.com/license -->
4018
3905
  </div>
4019
3906
  <div>
4020
3907
  <!-- TODO: go through this css, the group misses a padding and could profit from BootStrap -->
4021
- <label class="o-checkbox mt-1">
4022
- <input
4023
- t-att-checked="searchOptions.matchCase"
4024
- t-on-change="searchMatchCase"
4025
- type="checkbox"
4026
- />
4027
- <span>Match case</span>
4028
- </label>
4029
- <label class="o-checkbox">
4030
- <input
4031
- t-att-checked="searchOptions.exactMatch"
4032
- t-on-change="searchExactMatch"
4033
- type="checkbox"
4034
- />
4035
- <span>Match entire cell content</span>
4036
- </label>
4037
- <label class="o-checkbox">
4038
- <input
4039
- t-att-checked="searchOptions.searchFormulas"
4040
- t-on-change="searchFormulas"
4041
- type="checkbox"
4042
- />
4043
- <span>Search in formulas</span>
4044
- </label>
3908
+ <t t-set="matchCaseLabel">Match case</t>
3909
+ <Checkbox
3910
+ value="searchOptions.matchCase"
3911
+ label="matchCaseLabel"
3912
+ onChange.bind="searchMatchCase"
3913
+ />
3914
+ <t t-set="exactMatchLabel">Match entire cell content</t>
3915
+ <Checkbox
3916
+ value="searchOptions.exactMatch"
3917
+ label="exactMatchLabel"
3918
+ onChange.bind="searchExactMatch"
3919
+ />
3920
+ <t t-set="searchFormulasLabel">Search in formulas</t>
3921
+ <Checkbox
3922
+ value="searchOptions.searchFormulas"
3923
+ label="searchFormulasLabel"
3924
+ onChange.bind="searchFormulas"
3925
+ />
4045
3926
  </div>
4046
3927
  <div class="o-matches-count mt-4" t-if="toSearch !== ''">
4047
3928
  <div t-if="searchOptions.searchScope === 'specificRange' and dataRange != ''">
@@ -4054,7 +3935,7 @@ https://fontawesome.com/license -->
4054
3935
  <t t-esc="allSheetsMatchesCount"/>
4055
3936
  </div>
4056
3937
  </div>
4057
- </div>
3938
+ </Section>
4058
3939
  <div class="o-sidePanelButtons">
4059
3940
  <button
4060
3941
  t-att-disabled="!hasSearchResult"
@@ -4066,8 +3947,8 @@ https://fontawesome.com/license -->
4066
3947
  Next
4067
3948
  </button>
4068
3949
  </div>
4069
- <div class="o-section" t-if="!env.model.getters.isReadonly()">
4070
- <div class="o-section-title">Replace</div>
3950
+ <Section t-if="!env.model.getters.isReadonly()">
3951
+ <t t-set-slot="title">Replace</t>
4071
3952
  <div class="o-input-search-container">
4072
3953
  <input
4073
3954
  type="text"
@@ -4076,7 +3957,7 @@ https://fontawesome.com/license -->
4076
3957
  t-on-keydown="onKeydownReplace"
4077
3958
  />
4078
3959
  </div>
4079
- </div>
3960
+ </Section>
4080
3961
 
4081
3962
  <div class="o-sidePanelButtons" t-if="!env.model.getters.isReadonly()">
4082
3963
  <button
@@ -4114,38 +3995,35 @@ https://fontawesome.com/license -->
4114
3995
 
4115
3996
  <t t-name="o-spreadsheet-RemoveDuplicatesPanel">
4116
3997
  <div class="o-remove-duplicates">
4117
- <div class="o-section">
3998
+ <Section>
4118
3999
  <div class="o-section-subtitle" t-esc="selectionStatisticalInformation"/>
4119
- <label class="o-checkbox">
4120
- <input type="checkbox" t-att-checked="state.hasHeader" t-on-change="toggleHasHeader"/>
4121
- Data has header row
4122
- </label>
4123
- </div>
4000
+ <t t-set="dataHasHeaderLabel">Data has header row</t>
4001
+ <Checkbox
4002
+ value="state.hasHeader"
4003
+ label="dataHasHeaderLabel"
4004
+ onChange.bind="toggleHasHeader"
4005
+ />
4006
+ </Section>
4124
4007
 
4125
- <div class="o-section">
4126
- <div class="o-section-title">Columns to analyze</div>
4008
+ <Section>
4009
+ <t t-set-slot="title">Columns to analyze</t>
4127
4010
  <div class="o-checkbox-selection overflow-auto p-3 vh-50 border rounded">
4128
- <label class="o-checkbox">
4129
- <input
4130
- t-att-checked="isEveryColumnSelected"
4131
- t-on-change="toggleAllColumns"
4132
- type="checkbox"
4133
- />
4134
- Select all
4135
- </label>
4011
+ <t t-set="selectAllLabel">Select all</t>
4012
+ <Checkbox
4013
+ value="isEveryColumnSelected"
4014
+ label="selectAllLabel"
4015
+ onChange.bind="toggleAllColumns"
4016
+ />
4136
4017
 
4137
4018
  <t t-foreach="Object.keys(state.columns)" t-as="colIndex" t-key="colIndex">
4138
- <label class="o-checkbox">
4139
- <input
4140
- type="checkbox"
4141
- t-att-checked="state.columns[colIndex]"
4142
- t-on-change="() => this.toggleColumn(colIndex)"
4143
- />
4144
- <t t-esc="getColLabel(colIndex)"/>
4145
- </label>
4019
+ <Checkbox
4020
+ value="state.columns[colIndex]"
4021
+ label="getColLabel(colIndex)"
4022
+ onChange="() => this.toggleColumn(colIndex)"
4023
+ />
4146
4024
  </t>
4147
4025
  </div>
4148
- </div>
4026
+ </Section>
4149
4027
 
4150
4028
  <div class="o-sidePanelButtons">
4151
4029
  <button
@@ -4180,11 +4058,9 @@ https://fontawesome.com/license -->
4180
4058
 
4181
4059
  <t t-name="o-spreadsheet-SettingsPanel">
4182
4060
  <div class="o-settings-panel">
4183
- <div class="o-section">
4184
- <div class="o-section-title">Locale</div>
4185
- <select
4186
- class="o-input o-type-selector"
4187
- t-on-change="(ev) => this.onLocaleChange(ev.target.value)">
4061
+ <Section>
4062
+ <t t-set-slot="title">Locale</t>
4063
+ <select class="o-input" t-on-change="(ev) => this.onLocaleChange(ev.target.value)">
4188
4064
  <option
4189
4065
  t-foreach="supportedLocales"
4190
4066
  t-as="locale"
@@ -4208,7 +4084,7 @@ https://fontawesome.com/license -->
4208
4084
  <span t-esc="dateTimeFormatPreview"/>
4209
4085
  </div>
4210
4086
  </div>
4211
- </div>
4087
+ </Section>
4212
4088
  </div>
4213
4089
  </t>
4214
4090
 
@@ -4238,11 +4114,9 @@ https://fontawesome.com/license -->
4238
4114
 
4239
4115
  <t t-name="o-spreadsheet-SplitIntoColumnsPanel">
4240
4116
  <div class="o-split-to-cols-panel">
4241
- <div class="o-section">
4242
- <div class="o-section-title">Separator</div>
4243
- <select
4244
- class="o-input o-type-selector"
4245
- t-on-change="(ev) => this.onSeparatorChange(ev.target.value)">
4117
+ <Section>
4118
+ <t t-set-slot="title">Separator</t>
4119
+ <select class="o-input" t-on-change="(ev) => this.onSeparatorChange(ev.target.value)">
4246
4120
  <option
4247
4121
  t-foreach="separators"
4248
4122
  t-as="separator"
@@ -4262,15 +4136,12 @@ https://fontawesome.com/license -->
4262
4136
  placeholder="Add any characters or symbol"
4263
4137
  />
4264
4138
 
4265
- <label class="o-checkbox">
4266
- <input
4267
- type="checkbox"
4268
- name="add columns"
4269
- t-att-checked="state.addNewColumns"
4270
- t-on-change="updateAddNewColumnsCheckbox"
4271
- />
4272
- Add new columns to avoid overwriting cells
4273
- </label>
4139
+ <t t-set="addColumnsLabel">Add new columns to avoid overwriting cells</t>
4140
+ <Checkbox
4141
+ value="state.addNewColumns"
4142
+ label="addColumnsLabel"
4143
+ onChange.bind="updateAddNewColumnsCheckbox"
4144
+ />
4274
4145
 
4275
4146
  <div class="o-sidePanelButtons">
4276
4147
  <button
@@ -4283,7 +4154,7 @@ https://fontawesome.com/license -->
4283
4154
 
4284
4155
  <ValidationMessages messages="errorMessages" msgType="'error'"/>
4285
4156
  <ValidationMessages messages="warningMessages" msgType="'warning'"/>
4286
- </div>
4157
+ </Section>
4287
4158
  </div>
4288
4159
  </t>
4289
4160