[TASK] Rename web component 'typo3-formengine-element-select-check-box'

The functionality of the web component `<typo3-formengine-element-
select-check-box></typo3-formengine-element-select-check-box>`
should not be exclusively for use in FormEngine. Therefore, the
component is renamed and moved.

Resolves: #104636
Related: #98683
Related: #104142
Releases: main
Change-Id: Id6a639a8a6b262edc19fc0d96831406950e45783
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/85652
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Reviewed-by: Oliver Bartsch <bo@cedev.de>
Tested-by: Oliver Bartsch <bo@cedev.de>
Reviewed-by: Jasmina Ließmann <minapokhalo+typo3@gmail.com>
Tested-by: Jasmina Ließmann <minapokhalo+typo3@gmail.com>
Tested-by: core-ci <typo3@b13.com>

Build/Sources/TypeScript/backend/form-engine/element/select-check-box-element.ts → Build/Sources/TypeScript/backend/element/collapsible-element.ts

@@ -14,36 +14,32 @@
 import RegularEvent from '@typo3/core/event/regular-event';
 import Icons from '@typo3/backend/icons';
 
-enum Identifier {
-  toggleGroup = '.t3js-toggle-selectcheckbox-group',
-}
-
 enum IconIdentifier {
   collapse = 'actions-view-list-collapse',
   expand = 'actions-view-list-expand',
 }
 
 /**
- * Module: @typo3/backend/form-engine/element/select-check-box-element
+ * Module: @typo3/backend/element/collapsible-element
  *
- * Functionality for the selectCheckBox element
+ * Functionality for collapsible elements like accordions and panels
  *
  * @example
- * <typo3-formengine-element-select-check-box>
+ * <typo3-backend-collapsible>
  *   ...
- * </typo3-formengine-element-select-check-box>
+ * </typo3-backend-collapsible>
  *
  * This is based on W3C custom elements ("web components") specification, see
  * https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
  */
-class SelectCheckBoxElement extends HTMLElement {
+class CollapsibleElement extends HTMLElement {
 
   public connectedCallback(): void {
     this.registerEventHandler();
   }
 
   private registerEventHandler(): void {
-    new RegularEvent('click', this.toggleGroup).delegateTo(this, Identifier.toggleGroup);
+    new RegularEvent('click', this.toggleGroup).delegateTo(this, 'button[data-bs-toggle="collapse"]');
   }
 
   private toggleGroup(e: MouseEvent, targetEl: HTMLElement): void {
@@ -59,4 +55,4 @@ class SelectCheckBoxElement extends HTMLElement {
   }
 }
 
-window.customElements.define('typo3-formengine-element-select-check-box', SelectCheckBoxElement);
+window.customElements.define('typo3-backend-collapsible', CollapsibleElement);

typo3/sysext/backend/Classes/Form/Element/SelectCheckBoxElement.php

@@ -152,7 +152,7 @@ public function render(): array
         $fieldWizardHtml = $fieldWizardResult['html'];
         $resultArray = $this->mergeChildReturnIntoExistingResult($resultArray, $fieldWizardResult, false);
 
-        $html[] = '<typo3-formengine-element-select-check-box class="formengine-field-item t3js-formengine-field-item" data-formengine-validation-rules="' . htmlspecialchars($this->getValidationDataAsJsonString($config)) . '">';
+        $html[] = '<typo3-backend-collapsible class="formengine-field-item t3js-formengine-field-item" data-formengine-validation-rules="' . htmlspecialchars($this->getValidationDataAsJsonString($config)) . '">';
         $html[] = $fieldInformationHtml;
         $html[] =   '<div class="form-wizards-wrap">';
         $html[] =       '<div class="form-wizards-element">';
@@ -174,7 +174,7 @@ public function render(): array
                 $expanded = ($config['appearance']['expandAll'] ?? false) ? 'true' : 'false';
                 $icon = '<span class="collapseIcon">' . $this->iconFactory->getIcon((($config['appearance']['expandAll'] ?? false) ? 'actions-view-list-collapse' : 'actions-view-list-expand'), IconSize::SMALL)->render() . '</span>';
 
-                $html[] = '<button type="button" class="t3js-toggle-selectcheckbox-group panel-heading panel-heading-button" aria-expanded="' . $expanded . '"';
+                $html[] = '<button type="button" class="panel-heading panel-heading-button" aria-expanded="' . $expanded . '"';
                 $html[] = ' aria-controls="' . $groupCollapsibleId . '" data-bs-target="#' . $groupCollapsibleId . '" data-bs-toggle="collapse">';
                 $html[] = '<span class="flex-grow-1 align-self-center">';
                 $html[] =   $group['header']['icon'];
@@ -249,7 +249,7 @@ public function render(): array
 
                     // Add JavaScript module. This is only needed, in case the element
                     // is not readOnly, since otherwise no checkbox changes take place.
-                    $resultArray['javaScriptModules'][] = JavaScriptModuleInstruction::create('@typo3/backend/form-engine/element/select-check-box-element.js');
+                    $resultArray['javaScriptModules'][] = JavaScriptModuleInstruction::create('@typo3/backend/element/collapsible-element.js');
                     $resultArray['javaScriptModules'][] = JavaScriptModuleInstruction::create('@typo3/backend/multi-record-selection.js');
                 }
                 $html[] =            '<tbody>' . implode(LF, $tableRows) . '</tbody>';
@@ -269,7 +269,7 @@ public function render(): array
             $html[] =   '</div>';
         }
         $html[] =   '</div>';
-        $html[] = '</typo3-formengine-element-select-check-box>';
+        $html[] = '</typo3-backend-collapsible>';
 
         $resultArray['html'] = $this->wrapWithFieldsetAndLegend(implode(LF, $html));
         return $resultArray;

typo3/sysext/backend/Resources/Public/JavaScript/element/collapsible-element.js

@@ -0,0 +1,13 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+import RegularEvent from"@typo3/core/event/regular-event.js";import Icons from"@typo3/backend/icons.js";var IconIdentifier;!function(e){e.collapse="actions-view-list-collapse",e.expand="actions-view-list-expand"}(IconIdentifier||(IconIdentifier={}));class CollapsibleElement extends HTMLElement{connectedCallback(){this.registerEventHandler()}registerEventHandler(){new RegularEvent("click",this.toggleGroup).delegateTo(this,'button[data-bs-toggle="collapse"]')}toggleGroup(e,n){e.preventDefault();const t="true"===n.ariaExpanded,l=n.querySelector(".collapseIcon"),o=t?IconIdentifier.collapse:IconIdentifier.expand;Icons.getIcon(o,Icons.sizes.small).then((e=>{l.innerHTML=e}))}}window.customElements.define("typo3-backend-collapsible",CollapsibleElement);