[6.0] Field simple color as web component

[dgrammatiko]

Summary of Changes

Refactor the code so:

• php: layout spits buttons as slotted elements
• use of :part to style the component internals.
• component becomes light/dark
• JS: component now uses the elementInternals so it is an actual form field
• The client side supports all the colors that a browser could support (hex, rgb, lch, oklab, color(colorspace val1 val2 val3 / alpha)). This requires setting the format to "". All color values are validated client side

B/C considerations:

• The field layout has changes (the old one WILL NOT WORK)
• The old field dispatched 2 change events, one on the custom element and another on the select element. There's only one event on the custom element now

Testing Instructions

Paste this:

<field
  name="blabla"
  type="color"
  control="simple"
  format=""
  colors="#000000,rgb(59% 4.79% 75.2% / 0.8),oklch(87% 0.293 207),oklab(79% -0.261 0.088),color(display-p3 0.83 0.19 0.73 / 0.96),#FF0000,lch(56 90.2 154 / 0.88),none"
  default=""
  label="color"
/>

in the templateDetails.xml of the Atum template (after line 51: <fieldset name="colors" label="TPL_ATUM_COLORS_SETTINGS_LABEL">)

Check that the field:

• saves and respects the value from the PHP side
• works with the keyboard (enter to go to the select mode, tab to navigate, enter to select)

Actual result BEFORE applying this Pull Request

Expected result AFTER applying this Pull Request

Screen.Recording.2024-03-19.at.6.11.53.PM.mov

Link to documentations

Please select:

• Documentation link for docs.joomla.org:

• No documentation changes for docs.joomla.org needed

• Pull Request link for manual.joomla.org:

• No documentation changes for manual.joomla.org needed

Unused strings

JFIELD_COLOR_SELECT="Select a colour"
JFIELD_COLOR_TRANSPARENT="No colour, transparent"
JFIELD_COLOR_VALUE="Colour with hexadecimal value of"

[exlemor]

When I try to test this PR from the Joomla_6.0.0-alpha1-dev+pr.45004-Development-Full_Package.zip file, I get this error when trying to go to Administrator Templates in the backend:

An error has occurred.
0 Call to undefined method stdClass::get()
Call Stack

Function Location

1 () JROOT/administrator/components/com_templates/tmpl/templates/default.php:101
2 include() JROOT/libraries/src/MVC/View/HtmlView.php:416
3 Joomla\CMS\MVC\View\HtmlView->loadTemplate() JROOT/libraries/src/MVC/View/HtmlView.php:204
4 Joomla\CMS\MVC\View\HtmlView->display() JROOT/administrator/components/com_templates/src/View/Templates/HtmlView.php:128
5 Joomla\Component\Templates\Administrator\View\Templates\HtmlView->display() JROOT/libraries/src/MVC/Controller/BaseController.php:697
6 Joomla\CMS\MVC\Controller\BaseController->display() JROOT/administrator/components/com_templates/src/Controller/DisplayController.php:68
7 Joomla\Component\Templates\Administrator\Controller\DisplayController->display() JROOT/libraries/src/MVC/Controller/BaseController.php:730
8 Joomla\CMS\MVC\Controller\BaseController->execute() JROOT/libraries/src/Dispatcher/ComponentDispatcher.php:143
9 Joomla\CMS\Dispatcher\ComponentDispatcher->dispatch() JROOT/libraries/src/Component/ComponentHelper.php:361
10 Joomla\CMS\Component\ComponentHelper::renderComponent()

Checked with Philip who verified I was doing it correctly.

[ceford]

I have tested this item ✅ successfully on ff4b424

I can confirm the two field checks work as described. The rest is a mystery to me!

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45004.}