[REF] web_editor, *: use widgets for left panel components

Before this commit, the rendering of inner content of the left panel
options was handled through _buildXXXElement methods in the options
widgets. Now they are handled through sub-widgets which also handle
the user events.

Each sub-widget is notified with the string value it should hold
according to the snippet option target and methods. Each sub-widget
notifies a string value following user interactions, which snippet
options can use to adapt their target through their option methods.

The current sub-widgets introduced by this commit are (others will
follow):

1) we-button
2) we-checkbox
3) we-input
4) we-select (typically containing multiple we-button widgets)
5) we-multi (typically containing multiple we-input widget)

Following this commit only 3 standard option methods remain, which can
be used with any meaningful widget:

1) selectClass

-> Same as before + handle the old 'toggleClass' method when used with
   a checkbox-like widget.

2) selectStyle

-> Same as old setStyle, introduced recently (simply renamed)

3) selectDataAttribute

-> Handle both old selectDataAttribute and setDataAttribute, introduced
   recently

The parameters these methods received are now:
- previewMode: same as before
- widgetValue: the string value the widget currently holds
- params: additional parameters (mainly dataset of the related xml)
    + params.possibleValues (all the possible values for the method,
      meaninful for a select or a checkbox)
    + params.defaultValue (the value that the widget would give if it
      even holds no value)

When defining a method in XML, the given value is the default value.
e.g. data-select-style="34px" data-css-property="margin-top"
-> if set on any widget, allows to retrieve a value from the user to
   customize the margin-top, the default value being 34px.
   -> if used with a we-input, allow to retrieve any value and an empty
      value will be equal to 34px
   -> if used on a checkbox, allow to toggle between no value and 34px.
   -> ...

Hopefully, detailed documentation about all of this will follow. Code
documentation should already be helpful.

Last note: the _updateUI method (replacing the old _setActive) is now
async (so does all the functions calling it). In particular, the _select
method is now async.

Part of https://github.com/odoo/odoo/pull/40282
In preparation of task-2122935 and other tasks

1 files changed, 2 insertions, 2 deletions

diff --git a/addons/website_form/views/snippets.xml b/addons/website_form/views/snippets.xml
index e558f6c5eab..0b4ef73b623 100644
--- a/addons/website_form/views/snippets.xml
+++ b/addons/website_form/views/snippets.xml
@@ -51,7 +51,7 @@
               <!-- Field -->
               <div data-js='website_form_editor' data-selector=".form-field" data-drop-near=".form-field">
                     <we-checkbox string="Hidden" data-no-preview="true"
-                                 data-toggle-class="o_website_form_field_hidden"/>
+                                 data-select-class="o_website_form_field_hidden"/>
               </div>
 
               <!-- Add an option to display radio buttons / checkboxes horizontally or vertically -->
@@ -72,7 +72,7 @@
               <div data-js='website_form_editor_field' data-selector=".form-field:not(.o_website_form_required)">
                   <we-checkbox string="Required" data-no-preview="true"
                                data-website_form_field_require=""
-                               data-toggle-class="o_website_form_required_custom"/>
+                               data-select-class="o_website_form_required_custom"/>
               </div>
 
               <!-- Remove the duplicate options of model fields -->