[IMP] web_editor, *: make Colorpicker a Widget

*: website, web

Move the colorpicker dialog logic into a colorpicker *widget*, which the
colorpicker dialog will now instantiate.

Part of https://github.com/odoo/odoo/pull/46088
task-2195313

12 files changed, 102 insertions, 82 deletions

diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index d5f1f1074d4..9c04679a0d2 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -23,7 +23,7 @@ var utils = require('web.utils');
 var view_dialogs = require('web.view_dialogs');
 var field_utils = require('web.field_utils');
 var time = require('web.time');
-var ColorpickerDialog = require('web.ColorpickerDialog');
+const {ColorpickerDialog} = require('web.Colorpicker');
 
 let FieldBoolean = deprecatedFields.FieldBoolean;
 
@@ -1269,7 +1269,7 @@ var FieldPercentage = FieldFloat.extend({
         if (this.mode === 'edit') {
             this.tagName = 'div';
             this.className += ' o_input';
-            
+
             // do not display % in the input in edit
             this.formatOptions.noSymbol = true;
         }
diff --git a/addons/web/static/src/js/widgets/colorpicker.js b/addons/web/static/src/js/widgets/colorpicker.js
index 1d43d21cfbd..87a46e77a2f 100644
--- a/addons/web/static/src/js/widgets/colorpicker.js
+++ b/addons/web/static/src/js/widgets/colorpicker.js
@@ -1,22 +1,22 @@
-odoo.define('web.ColorpickerDialog', function (require) {
+odoo.define('web.Colorpicker', function (require) {
 'use strict';
 
 var core = require('web.core');
 var utils = require('web.utils');
 var Dialog = require('web.Dialog');
+var Widget = require('web.Widget');
 
 var _t = core._t;
 
-var ColorpickerDialog = Dialog.extend({
-    xmlDependencies: (Dialog.prototype.xmlDependencies || [])
-        .concat(['/web/static/src/xml/colorpicker.xml']),
-    template: 'ColorpickerDialog',
-    events: _.extend({}, Dialog.prototype.events || {}, {
+var ColorpickerWidget = Widget.extend({
+    xmlDependencies: ['/web/static/src/xml/colorpicker.xml'],
+    template: 'Colorpicker',
+    events: {
         'mousedown .o_color_pick_area': '_onMouseDownPicker',
         'mousedown .o_color_slider': '_onMouseDownSlider',
         'mousedown .o_opacity_slider': '_onMouseDownOpacitySlider',
         'change .o_color_picker_inputs': '_onChangeInputs',
-    }),
+    },
 
     /**
      * @constructor
@@ -26,17 +26,8 @@ var ColorpickerDialog = Dialog.extend({
      * @param {string} [options.noTransparency=false]
      */
     init: function (parent, options) {
+        this._super(...arguments);
         options = options || {};
-
-        this._super(parent, _.extend({
-            size: 'small',
-            title: _t('Pick a color'),
-            buttons: [
-                {text: _t('Choose'), classes: 'btn-primary', close: true, click: this._onFinalPick.bind(this)},
-                {text: _t('Discard'), close: true},
-            ],
-        }, options));
-
         this.trigger_up('getRecordInfo', {
             recordInfo: options,
             callback: function (recordInfo) {
@@ -76,12 +67,11 @@ var ColorpickerDialog = Dialog.extend({
         this.$opacitySliderPointer = this.$('.o_opacity_pointer');
 
         var defaultColor = this.options.defaultColor || '#FF0000';
-        var rgba = ColorpickerDialog.convertCSSColorToRgba(defaultColor);
+        var rgba = ColorpickerWidget.convertCSSColorToRgba(defaultColor);
         if (rgba) {
             this._updateRgba(rgba.red, rgba.green, rgba.blue, rgba.opacity);
         }
-        this.opened().then(this._updateUI.bind(this));
-
+        this._updateUI();
         return this._super.apply(this, arguments);
     },
     /**
@@ -143,14 +133,14 @@ var ColorpickerDialog = Dialog.extend({
      * @param {string} hex - hexadecimal code
      */
     _updateHex: function (hex) {
-        var rgb = ColorpickerDialog.convertCSSColorToRgba(hex);
+        var rgb = ColorpickerWidget.convertCSSColorToRgba(hex);
         if (!rgb) {
             return;
         }
         _.extend(this.colorComponents,
             {hex: hex},
             rgb,
-            ColorpickerDialog.convertRgbToHsl(rgb.red, rgb.green, rgb.blue)
+            ColorpickerWidget.convertRgbToHsl(rgb.red, rgb.green, rgb.blue)
         );
         this._updateCssColor();
     },
@@ -167,7 +157,7 @@ var ColorpickerDialog = Dialog.extend({
         // We update the hexadecimal code by transforming into a css color and
         // ignoring the opacity (we don't display opacity component in hexa as
         // not supported on all browsers)
-        var hex = ColorpickerDialog.convertRgbaToCSSColor(r, g, b);
+        var hex = ColorpickerWidget.convertRgbaToCSSColor(r, g, b);
         if (!hex) {
             return;
         }
@@ -175,7 +165,7 @@ var ColorpickerDialog = Dialog.extend({
             {red: r, green: g, blue: b},
             a === undefined ? {} : {opacity: a},
             {hex: hex},
-            ColorpickerDialog.convertRgbToHsl(r, g, b)
+            ColorpickerWidget.convertRgbToHsl(r, g, b)
         );
         this._updateCssColor();
     },
@@ -188,12 +178,12 @@ var ColorpickerDialog = Dialog.extend({
      * @param {integer} l
      */
     _updateHsl: function (h, s, l) {
-        var rgb = ColorpickerDialog.convertHslToRgb(h, s, l);
+        var rgb = ColorpickerWidget.convertHslToRgb(h, s, l);
         if (!rgb) {
             return;
         }
         // We receive an hexa as we ignore the opacity
-        const hex = ColorpickerDialog.convertRgbaToCSSColor(rgb.red, rgb.green, rgb.blue);
+        const hex = ColorpickerWidget.convertRgbaToCSSColor(rgb.red, rgb.green, rgb.blue);
         _.extend(this.colorComponents,
             {hue: h, saturation: s, lightness: l},
             rgb,
@@ -227,7 +217,7 @@ var ColorpickerDialog = Dialog.extend({
         const b = this.colorComponents.blue;
         const a = this.colorComponents.opacity;
         _.extend(this.colorComponents,
-            {cssColor: ColorpickerDialog.convertRgbaToCSSColor(r, g, b, a)}
+            {cssColor: ColorpickerWidget.convertRgbaToCSSColor(r, g, b, a)}
         );
     },
 
@@ -355,12 +345,6 @@ var ColorpickerDialog = Dialog.extend({
         }
         this._updateUI();
     },
-    /**
-     * @private
-     */
-    _onFinalPick: function () {
-        this.trigger_up('colorpicker:saved', this.colorComponents);
-    },
 });
 
 //--------------------------------------------------------------------------
@@ -379,7 +363,7 @@ var ColorpickerDialog = Dialog.extend({
  *          - saturation [0, 100]
  *          - lightness [0, 100]
  */
-ColorpickerDialog.convertRgbToHsl = function (r, g, b) {
+ColorpickerWidget.convertRgbToHsl = function (r, g, b) {
     if (typeof (r) !== 'number' || isNaN(r) || r < 0 || r > 255
             || typeof (g) !== 'number' || isNaN(g) || g < 0 || g > 255
             || typeof (b) !== 'number' || isNaN(b) || b < 0 || b > 255) {
@@ -428,7 +412,7 @@ ColorpickerDialog.convertRgbToHsl = function (r, g, b) {
  *          - green [0, 255]
  *          - blue [0, 255]
  */
-ColorpickerDialog.convertHslToRgb = function (h, s, l) {
+ColorpickerWidget.convertHslToRgb = function (h, s, l) {
     if (typeof (h) !== 'number' || isNaN(h) || h < 0 || h > 360
             || typeof (s) !== 'number' || isNaN(s) || s < 0 || s > 100
             || typeof (l) !== 'number' || isNaN(l) || l < 0 || l > 100) {
@@ -507,7 +491,7 @@ ColorpickerDialog.convertHslToRgb = function (h, s, l) {
  * @param {float} a - [0, 100]
  * @returns {string}
  */
-ColorpickerDialog.convertRgbaToCSSColor = function (r, g, b, a) {
+ColorpickerWidget.convertRgbaToCSSColor = function (r, g, b, a) {
     if (typeof (r) !== 'number' || isNaN(r) || r < 0 || r > 255
             || typeof (g) !== 'number' || isNaN(g) || g < 0 || g > 255
             || typeof (b) !== 'number' || isNaN(b) || b < 0 || b > 255) {
@@ -535,7 +519,7 @@ ColorpickerDialog.convertRgbaToCSSColor = function (r, g, b, a) {
  *          - blue [0, 255]
  *          - opacity [0, 100.0]
  */
-ColorpickerDialog.convertCSSColorToRgba = function (cssColor) {
+ColorpickerWidget.convertCSSColorToRgba = function (cssColor) {
     // Check if cssColor is a rgba() or rgb() color
     const rgba = cssColor.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
     if (rgba) {
@@ -576,12 +560,12 @@ ColorpickerDialog.convertCSSColorToRgba = function (cssColor) {
  * @returns {string} - the normalized css color or the given css color if it
  *                     failed to be normalized
  */
-ColorpickerDialog.normalizeCSSColor = function (cssColor) {
-    const rgba = ColorpickerDialog.convertCSSColorToRgba(cssColor);
+ColorpickerWidget.normalizeCSSColor = function (cssColor) {
+    const rgba = ColorpickerWidget.convertCSSColorToRgba(cssColor);
     if (!rgba) {
         return cssColor;
     }
-    return ColorpickerDialog.convertRgbaToCSSColor(rgba.red, rgba.green, rgba.blue, rgba.opacity);
+    return ColorpickerWidget.convertRgbaToCSSColor(rgba.red, rgba.green, rgba.blue, rgba.opacity);
 };
 /**
  * Checks if a given string is a css color.
@@ -590,9 +574,49 @@ ColorpickerDialog.normalizeCSSColor = function (cssColor) {
  * @param {string} cssColor
  * @returns {boolean}
  */
-ColorpickerDialog.isCSSColor = function (cssColor) {
-    return ColorpickerDialog.convertCSSColorToRgba(cssColor) !== false;
+ColorpickerWidget.isCSSColor = function (cssColor) {
+    return ColorpickerWidget.convertCSSColorToRgba(cssColor) !== false;
 };
 
-return ColorpickerDialog;
+const ColorpickerDialog = Dialog.extend({
+    /**
+     * @override
+     */
+    init: function (parent, options) {
+        this.options = options || {};
+        this._super(parent, _.extend({
+            size: 'small',
+            title: _t('Pick a color'),
+            buttons: [
+                {text: _t('Choose'), classes: 'btn-primary', close: true, click: this._onFinalPick.bind(this)},
+                {text: _t('Discard'), close: true},
+            ],
+        }, this.options));
+    },
+    /**
+     * @override
+     */
+    start: function () {
+        const proms = [this._super(...arguments)];
+        this.colorPicker = new ColorpickerWidget(this, this.options);
+        proms.push(this.colorPicker.appendTo(this.$el));
+        return Promise.all(proms);
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onFinalPick: function () {
+        this.trigger_up('colorpicker:saved', this.colorPicker.colorComponents);
+    },
+});
+
+return {
+    ColorpickerDialog: ColorpickerDialog,
+    ColorpickerWidget: ColorpickerWidget,
+};
 });
diff --git a/addons/web/static/src/xml/colorpicker.xml b/addons/web/static/src/xml/colorpicker.xml
index dab882595db..957bef83146 100644
--- a/addons/web/static/src/xml/colorpicker.xml
+++ b/addons/web/static/src/xml/colorpicker.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
 
-<t t-name="ColorpickerDialog">
+<t t-name="Colorpicker">
     <div class="o_colorpicker_widget">
         <div class="row">
             <div class="col-12">
diff --git a/addons/web_editor/static/src/js/common/utils.js b/addons/web_editor/static/src/js/common/utils.js
index 6600abc6aaa..912b4717c69 100644
--- a/addons/web_editor/static/src/js/common/utils.js
+++ b/addons/web_editor/static/src/js/common/utils.js
@@ -1,7 +1,7 @@
 odoo.define('web_editor.utils', function (require) {
 'use strict';
 
-const ColorpickerDialog = require('web.ColorpickerDialog');
+const {ColorpickerWidget} = require('web.Colorpicker');
 
 /**
  * window.getComputedStyle cannot work properly with CSS shortcuts (like
@@ -121,8 +121,8 @@ function _getNumericAndUnit(value) {
  */
 function _areCssValuesEqual(value1, value2, cssProp, $target) {
     // If not colors, they will be left untouched
-    value1 = ColorpickerDialog.normalizeCSSColor(value1);
-    value2 = ColorpickerDialog.normalizeCSSColor(value2);
+    value1 = ColorpickerWidget.normalizeCSSColor(value1);
+    value2 = ColorpickerWidget.normalizeCSSColor(value2);
 
     // String comparison first
     if (value1 === value2) {
diff --git a/addons/web_editor/static/src/js/editor/rte.js b/addons/web_editor/static/src/js/editor/rte.js
index feb28100854..9abfc6b3a70 100644
--- a/addons/web_editor/static/src/js/editor/rte.js
+++ b/addons/web_editor/static/src/js/editor/rte.js
@@ -800,7 +800,7 @@ return {
 odoo.define('web_editor.rte.summernote_custom_colors', function (require) {
 'use strict';
 
-// These colors are already normalized as per normalizeCSSColor in web.ColorpickerDialog
+// These colors are already normalized as per normalizeCSSColor in web.Colorpicker
 return [
     ['#000000', '#424242', '#636363', '#9C9C94', '#CEC6CE', '#EFEFEF', '#F7F7F7', '#FFFFFF'],
     ['#FF0000', '#FF9C00', '#FFFF00', '#00FF00', '#00FFFF', '#0000FF', '#9C00FF', '#FF00FF'],
diff --git a/addons/web_editor/static/src/js/editor/rte.summernote.js b/addons/web_editor/static/src/js/editor/rte.summernote.js
index 83991c2b59b..68b00afb564 100644
--- a/addons/web_editor/static/src/js/editor/rte.summernote.js
+++ b/addons/web_editor/static/src/js/editor/rte.summernote.js
@@ -9,7 +9,7 @@ var core = require('web.core');
 // the bus by summernote in an iframe will be caught by the wysiwyg's SummernoteManager
 // outside the iframe.
 const topBus = window.top.odoo.__DEBUG__.services['web.core'].bus;
-const ColorpickerDialog = require('web.ColorpickerDialog');
+const {ColorpickerWidget} = require('web.Colorpicker');
 var ColorPaletteWidget = require('web_editor.ColorPalette').ColorPaletteWidget;
 var mixins = require('web.mixins');
 const session = require('web.session');
@@ -64,7 +64,7 @@ renderer.createPalette = function ($container, options) {
                 });
                 colorpicker.on('color_picked', null, ev => {
                     let color = ev.data.color;
-                    if (!ColorpickerDialog.isCSSColor(color)) {
+                    if (!ColorpickerWidget.isCSSColor(color)) {
                         color = (eventName === "foreColor" ? 'text-' : 'bg-') + color;
                     }
                     applyColor(ev.data.target, eventName, color);
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 08b8c3d3519..35fd4cef7c7 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -2,7 +2,7 @@ odoo.define('web_editor.snippets.options', function (require) {
 'use strict';
 
 var core = require('web.core');
-const ColorpickerDialog = require('web.ColorpickerDialog');
+const {ColorpickerWidget} = require('web.Colorpicker');
 const Dialog = require('web.Dialog');
 const time = require('web.time');
 var Widget = require('web.Widget');
@@ -1026,7 +1026,7 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
         }
         let value = this._super(...arguments);
         if (value && this.options.dataAttributes.hasOwnProperty('cssCompatible') &&
-            !ColorpickerDialog.isCSSColor(value)) {
+            !ColorpickerWidget.isCSSColor(value)) {
             value = `var(--${value})`;
         }
         return value;
@@ -1079,7 +1079,7 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
         this.colorPreviewEl.style.removeProperty('background-color');
 
         if (this._value) {
-            if (ColorpickerDialog.isCSSColor(this._value)) {
+            if (ColorpickerWidget.isCSSColor(this._value)) {
                 this.colorPreviewEl.style.backgroundColor = this._value;
             } else {
                 this.colorPreviewEl.classList.add('bg-' + this._value);
@@ -1939,7 +1939,7 @@ const SnippetOptionWidget = Widget.extend({
      */
     _normalizeWidgetValue: function (value) {
         value = `${value}`.trim(); // Force to a trimmed string
-        value = ColorpickerDialog.normalizeCSSColor(value); // If is a css color, normalize it
+        value = ColorpickerWidget.normalizeCSSColor(value); // If is a css color, normalize it
         return value;
     },
     /**
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
index e2b564cd76f..48d9c560c3c 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
@@ -3,7 +3,7 @@ odoo.define('web_editor.ColorPalette', function (require) {
 
 const core = require('web.core');
 const session = require('web.session');
-const ColorpickerDialog = require('web.ColorpickerDialog');
+const {ColorpickerDialog, ColorpickerWidget} = require('web.Colorpicker');
 const Widget = require('web.Widget');
 const summernoteCustomColors = require('web_editor.rte.summernote_custom_colors');
 
@@ -121,24 +121,20 @@ const ColorPaletteWidget = Widget.extend({
             $color.addClass('bg-' + colorName);
             this.colorNames.push(colorName);
             if (!elem.classList.contains('d-none')) {
-                const color = ColorpickerDialog.normalizeCSSColor(this.style.getPropertyValue('--' + colorName).trim());
+                const color = ColorpickerWidget.normalizeCSSColor(this.style.getPropertyValue('--' + colorName).trim());
                 this.colorToColorNames[color] = colorName;
             }
         });
 
+        // Render custom colors
+        this._buildCustomColors();
+
         // Compute selected color
         if (this.options.selectedColor) {
-            const selectedColor = ColorpickerDialog.normalizeCSSColor(this.options.selectedColor);
+            const selectedColor = ColorpickerWidget.normalizeCSSColor(this.options.selectedColor);
             if (selectedColor !== 'rgba(0, 0, 0, 0)') {
                 this.selectedColor = this.colorToColorNames[selectedColor] || selectedColor;
             }
-        }
-
-        // Render custom colors
-        this._buildCustomColors();
-
-        // Select selected Color
-        if (this.options.selectedColor) {
             const selectedButton = this.el.querySelector(`button[data-color="${this.selectedColor}"], button[style*="background-color:${this.selectedColor};"]`);
             if (selectedButton) {
                 selectedButton.classList.add('selected');
@@ -200,7 +196,7 @@ const ColorPaletteWidget = Widget.extend({
         });
         this.style.getPropertyValue(`--custom-colors`).trim().split(' ').forEach(v => {
             const color = this.style.getPropertyValue(`--${v}`).trim();
-            if (ColorpickerDialog.isCSSColor(color)) {
+            if (ColorpickerWidget.isCSSColor(color)) {
                 this._addCustomColor(existingColors, color);
             }
         });
@@ -223,10 +219,10 @@ const ColorPaletteWidget = Widget.extend({
         if (!color) {
             return;
         }
-        if (!ColorpickerDialog.isCSSColor(color)) {
+        if (!ColorpickerWidget.isCSSColor(color)) {
             color = this.style.getPropertyValue('--' + color).trim();
         }
-        const normColor = ColorpickerDialog.normalizeCSSColor(color);
+        const normColor = ColorpickerWidget.normalizeCSSColor(color);
         if (!existingColors.has(normColor)) {
             this._addCustomColorButton(normColor);
             existingColors.add(normColor);
@@ -267,7 +263,7 @@ const ColorPaletteWidget = Widget.extend({
      */
     _getButtonInfo: function (buttonEl) {
         const bgColor = buttonEl.style.backgroundColor;
-        const color = bgColor ? ColorpickerDialog.normalizeCSSColor(bgColor) : buttonEl.dataset.color;
+        const color = bgColor ? ColorpickerWidget.normalizeCSSColor(bgColor) : buttonEl.dataset.color;
         return {
             color: color,
             target: buttonEl,
@@ -349,8 +345,8 @@ const ColorPaletteWidget = Widget.extend({
     _onCustomColorButtonClick: async function (ev) {
         const target = ev.target;
         let selectedColor = this.selectedColor;
-        if (!ColorpickerDialog.isCSSColor(selectedColor)) {
-            selectedColor = ColorpickerDialog.normalizeCSSColor(this.style.getPropertyValue('--' + selectedColor).trim());
+        if (!ColorpickerWidget.isCSSColor(selectedColor)) {
+            selectedColor = ColorpickerWidget.normalizeCSSColor(this.style.getPropertyValue('--' + selectedColor).trim());
         }
         const colorpicker = new ColorpickerDialog(this, {
             defaultColor: selectedColor,
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/widgets.js b/addons/web_editor/static/src/js/wysiwyg/widgets/widgets.js
index 070287cf650..93d1068b949 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/widgets.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/widgets.js
@@ -6,7 +6,7 @@ var AltDialog = require('wysiwyg.widgets.AltDialog');
 var MediaDialog = require('wysiwyg.widgets.MediaDialog');
 var LinkDialog = require('wysiwyg.widgets.LinkDialog');
 var CropImageDialog = require('wysiwyg.widgets.CropImageDialog');
-var ColorpickerDialog = require('web.ColorpickerDialog');
+const {ColorpickerDialog} = require('web.Colorpicker');
 
 var media = require('wysiwyg.widgets.media');
 
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 11927dc3fc9..59052b4d29a 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -1,7 +1,7 @@
 odoo.define('website.editor.snippets.options', function (require) {
 'use strict';
 
-const ColorpickerDialog = require('web.ColorpickerDialog');
+const {ColorpickerWidget} = require('web.Colorpicker');
 const config = require('web.config');
 var core = require('web.core');
 var Dialog = require('web.Dialog');
@@ -338,10 +338,10 @@ options.Class.include({
         const colorType = params.colorType ? (params.colorType + '_') : '';
         const url = `${baseURL}user_${colorType}color_palette.scss`;
 
-        if (!ColorpickerDialog.isCSSColor(color)) {
+        if (!ColorpickerWidget.isCSSColor(color)) {
             const style = window.getComputedStyle(document.documentElement);
             color = style.getPropertyValue('--' + color).trim();
-            color = ColorpickerDialog.normalizeCSSColor(color);
+            color = ColorpickerWidget.normalizeCSSColor(color);
         }
         const colors = {};
         colors[params.color] = color;
@@ -386,7 +386,7 @@ options.Class.include({
     _getCSSColorFromName: function (colorName) {
         const style = window.getComputedStyle(document.documentElement);
         const color = style.getPropertyValue('--' + colorName).trim();
-        return ColorpickerDialog.normalizeCSSColor(color);
+        return ColorpickerWidget.normalizeCSSColor(color);
     },
     /**
      * @private
@@ -1824,7 +1824,7 @@ options.registry.CoverProperties = options.Class.extend({
             onSuccess: _widget => colorPickerWidget = _widget,
         });
         const color = colorPickerWidget._value;
-        const isCSSColor = ColorpickerDialog.isCSSColor(color);
+        const isCSSColor = ColorpickerWidget.isCSSColor(color);
         this.$target[0].dataset.bgColorClass = isCSSColor ? '' : 'bg-' + color;
         this.$target[0].dataset.bgColorStyle = isCSSColor ? `background-color:${color};` : '';
     },
diff --git a/addons/website/static/src/snippets/s_chart/options.js b/addons/website/static/src/snippets/s_chart/options.js
index a9429008fee..021a326be3c 100644
--- a/addons/website/static/src/snippets/s_chart/options.js
+++ b/addons/website/static/src/snippets/s_chart/options.js
@@ -2,7 +2,7 @@ odoo.define('website.s_chart_options', function (require) {
 'use strict';
 
 var core = require('web.core');
-const ColorpickerDialog = require('web.ColorpickerDialog');
+const {ColorpickerWidget} = require('web.Colorpicker');
 var options = require('web_editor.snippets.options');
 
 var _t = core._t;
@@ -81,7 +81,7 @@ options.registry.InnerChart = options.Class.extend({
             const color = el.dataset.backgroundColor || el.dataset.borderColor;
             if (color) {
                 el.style.border = '2px solid';
-                el.style.borderColor = ColorpickerDialog.isCSSColor(color) ? color : this.style.getPropertyValue(`--${color}`).trim();
+                el.style.borderColor = ColorpickerWidget.isCSSColor(color) ? color : this.style.getPropertyValue(`--${color}`).trim();
             }
         });
     },
diff --git a/addons/website/static/src/snippets/s_countdown/000.js b/addons/website/static/src/snippets/s_countdown/000.js
index 8f3f599966a..2d3e9f56fb9 100644
--- a/addons/website/static/src/snippets/s_countdown/000.js
+++ b/addons/website/static/src/snippets/s_countdown/000.js
@@ -1,7 +1,7 @@
 odoo.define('website.s_countdown', function (require) {
 'use strict';
 
-const ColorpickerDialog = require('web.ColorpickerDialog');
+const {ColorpickerWidget} = require('web.Colorpicker');
 const core = require('web.core');
 const publicWidget = require('web.public.widget');
 
@@ -72,7 +72,7 @@ const CountdownWidget = publicWidget.Widget.extend({
      * @returns {string}
      */
     _ensureCssColor: function (color) {
-        if (ColorpickerDialog.isCSSColor(color)) {
+        if (ColorpickerWidget.isCSSColor(color)) {
             return color;
         }
         const style = window.getComputedStyle(document.documentElement);