[IMP] website: introduce "auto" widget for theme modal

The theme customize dialog implements its own system of widgets. For
example: data-widget="color" and data-widget="input". Now, a new type of
widget data-widget="auto" exists. The goal is the same as the
data-widget="input" but with a predefined value that the user cannot
choose.

Also, as "data-value" was badly chosen during its implementation, it
is now renamed to "data-variable" and "data-value" is now used with the
new widget.

Example of the new widget "auto":

<opt data-widget="auto" data-variable="logo-height" data-value="3rem"
	string="Logo Height"/>

-> Allows to create a button forcing the logo height to 3rem.

Part of https://github.com/odoo/odoo/pull/33442
task-1974659

1 files changed, 9 insertions, 4 deletions

diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index f2e1465a788..59216fee115 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -37,11 +37,11 @@
         <div class="form-row justify-content-between o_options_container"/>
     </div>
     <t t-name="website.theme_customize_modal_option">
-        <div t-attf-class="o_theme_customize_option my-1 flex-grow-0 #{font ? 'o_theme_customize_option_font_' + font : ''} #{widget ? 'o_theme_customize_with_widget' : ''}">
+        <div t-attf-class="o_theme_customize_option my-1 flex-grow-0 #{font ? 'o_theme_customize_option_font_' + font : ''} #{widget and widget != 'auto' ? 'o_theme_customize_with_widget' : ''}">
             <img t-if="icon" t-att-src="icon"/>
 
             <t t-set="label" t-value="font ? '' : string"/>
-            <t t-if="alone and !widget" t-call="website.components.switch"/>
+            <t t-if="alone and (!widget or widget == 'auto')" t-call="website.components.switch"/>
             <label t-else="">
                 <input t-att-id="id" t-att-name="name" type="radio" t-att-checked="checked ? 'checked' : undefined"/>
                 <span><t t-esc="label"/></span>
@@ -59,13 +59,18 @@
             t-att-data-color-type="colorType"/>
     </t>
     <t t-name="website.theme_customize_widget_input">
-        <div t-attf-class="o_theme_customize_input o_theme_customize_input_#{value}"
-            t-att-data-value="value"
+        <div class="o_theme_customize_input"
+            t-att-data-variable="variable"
             t-att-data-unit="unit">
             <i class="fa fa-edit"/>
             <span/>
         </div>
     </t>
+    <t t-name="website.theme_customize_widget_auto">
+        <div class="o_theme_customize_auto"
+            t-att-data-variable="variable"
+            t-att-data-value="value"/>
+    </t>
     <t t-name="website.theme_customize_active_input">
         <div class="input-group input-group-sm align-items-center o_theme_customize_active_input">
             <input type="text" class="form-control" t-att-value="widget.value"/>