[BUGFIX] Decouple ColorPicker from FormEngine

Since #87031 the color picker is tightly coupled to FormEngine, causing
issues if not used in FormEngine context, e.g. in Constant Editor.

This patch removes the introduced FormEngine handling and uses minicolors'
events to fix the original reported bug.

Resolves: #88593
Related: #87031
Releases: master, 9.5
Change-Id: Ibb20785785d406bc113035f79bec95d9788866ab
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/61094
Tested-by: TYPO3com <noreply@typo3.com>
Tested-by: Jonas Eberle <flightvision@googlemail.com>
Tested-by: Joerg Kummer <typo3@enobe.de>
Tested-by: Daniel Goerz <daniel.goerz@posteo.de>
Reviewed-by: Markus Klein <markus.klein@typo3.org>
Reviewed-by: Susanne Moog <look@susi.dev>
Reviewed-by: Daniel Goerz <daniel.goerz@posteo.de>

Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ColorPicker.ts

@@ -13,7 +13,6 @@
 
 import * as $ from 'jquery';
 import 'TYPO3/CMS/Core/Contrib/jquery.minicolors';
-import FormEngine = require('TYPO3/CMS/Backend/FormEngine');
 
 /**
  * Module: TYPO3/CMS/Backend/ColorPicker
@@ -56,10 +55,11 @@ class ColorPicker {
     $(document).on('blur', '.t3js-color-picker', (event: Event): void => {
       const $element = $(event.target);
       $element.closest('.t3js-formengine-field-item')
-        .find('INPUT[type="hidden"]')
+        .find('input[type="hidden"]')
         .val($element.val());
-      if ($element.val() === '') { // force FormEngineReview if value is empty
-        FormEngine.Validation.validate();
+
+      if ($element.val() === '') {
+        $element.trigger('paste');
       }
     });
   }

typo3/sysext/backend/Resources/Public/JavaScript/ColorPicker.js

@@ -10,4 +10,4 @@
  *
  * The TYPO3 project - inspiring people to share!
  */
-define(["require","exports","jquery","TYPO3/CMS/Backend/FormEngine","TYPO3/CMS/Core/Contrib/jquery.minicolors"],function(e,t,o,i){"use strict";return new(function(){function e(){this.selector=".t3js-color-picker"}return e.prototype.initialize=function(){o(this.selector).minicolors({format:"hex",position:"bottom left",theme:"bootstrap"}),o(document).on("change",".t3js-colorpicker-value-trigger",function(e){var t=o(e.target);""!==t.val()&&(t.closest(".t3js-formengine-field-item").find(".t3js-color-picker").val(t.val()).trigger("paste"),t.val(""))}),o(document).on("blur",".t3js-color-picker",function(e){var t=o(e.target);t.closest(".t3js-formengine-field-item").find('INPUT[type="hidden"]').val(t.val()),""===t.val()&&i.Validation.validate()})},e}())});
+define(["require","exports","jquery","TYPO3/CMS/Core/Contrib/jquery.minicolors"],function(t,e,o){"use strict";return new(function(){function t(){this.selector=".t3js-color-picker"}return t.prototype.initialize=function(){o(this.selector).minicolors({format:"hex",position:"bottom left",theme:"bootstrap"}),o(document).on("change",".t3js-colorpicker-value-trigger",function(t){var e=o(t.target);""!==e.val()&&(e.closest(".t3js-formengine-field-item").find(".t3js-color-picker").val(e.val()).trigger("paste"),e.val(""))}),o(document).on("blur",".t3js-color-picker",function(t){var e=o(t.target);e.closest(".t3js-formengine-field-item").find('input[type="hidden"]').val(e.val()),""===e.val()&&e.trigger("paste")})},t}())});