Formular-Infrastruktur: Contact/Demo/Helpdesk mit E-Mail- und Salesforce-Delivery, JSON-Renderer-Erweiterungen, Crop-Variants

Build-Artefakte in public/_frontend/assets nicht enthalten.

packages/vitec/Resources/Public/Css/backend-container-collapse.css

@@ -20,3 +20,15 @@
 .t3-page-ce.vitec-ce-collapsed .vitec-collapse-toggle typo3-backend-icon {
     transform: rotate(180deg);
 }
+
+/* Collapsed: the element's own preview header lives in the CE header row —
+   full width on its own line below the icon/button row. */
+.t3-page-ce-header:has(.vitec-preview-header--in-header) {
+    flex-wrap: wrap;
+}
+.element-preview-header.vitec-preview-header--in-header {
+    flex-basis: 100%;
+    width: 100%;
+    order: 10;
+    margin-top: 0.25rem;
+}

packages/vitec/Resources/Public/Icons/vitec-plugin-contactform.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+  <rect x="3" y="7" width="26" height="18" rx="2" fill="#0a3d62"/>
+  <path d="M4 9l12 9 12-9" stroke="#ff6a00" stroke-width="2.5" fill="none"/>
+</svg>

packages/vitec/Resources/Public/Icons/vitec-plugin-demoform.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+  <rect x="3" y="6" width="26" height="17" rx="2" fill="#0a3d62"/>
+  <path d="M13 11l8 4.5-8 4.5z" fill="#ff6a00"/>
+  <rect x="10" y="25" width="12" height="2.5" rx="1" fill="#9aa2ab"/>
+</svg>

packages/vitec/Resources/Public/Icons/vitec-plugin-helpdeskform.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+  <path d="M16 4a10 10 0 0 0-10 10v6a3 3 0 0 0 3 3h2v-8H8v-1a8 8 0 1 1 16 0v1h-3v8h2a3 3 0 0 0 3-3v-6A10 10 0 0 0 16 4z" fill="#0a3d62"/>
+  <path d="M21 23v1.5a2.5 2.5 0 0 1-2.5 2.5H15" stroke="#ff6a00" stroke-width="2" fill="none"/>
+</svg>

packages/vitec/Resources/Public/Javascript/container-collapse.js

@@ -118,14 +118,70 @@ class VitecContainerCollapse {
     if (this.isCollapsed(uid)) {
       ce.classList.add('vitec-ce-collapsed');
     }
+    this.syncPreviewHeader(ce);
 
     button.addEventListener('click', (event) => {
       event.preventDefault();
       event.stopPropagation();
       const collapsed = ce.classList.toggle('vitec-ce-collapsed');
       this.setCollapsed(uid, collapsed);
+      this.syncPreviewHeader(ce);
     });
   }
+
+  /**
+   * Keep the element's own `.element-preview-header` visible while collapsed:
+   * it is moved into the CE header row (after `.t3-page-ce-header-right`) and
+   * moved back to its original spot (placeholder marker) on expand.
+   */
+  syncPreviewHeader(ce) {
+    const element = ce.querySelector(':scope > .t3-page-ce-element');
+    if (!element) {
+      return;
+    }
+    const header = element.querySelector(':scope > .t3-page-ce-header');
+    const body = element.querySelector(':scope > .t3-page-ce-body');
+    if (!header || !body) {
+      return;
+    }
+
+    const collapsed = ce.classList.contains('vitec-ce-collapsed');
+
+    if (collapsed) {
+      // Find THIS element's preview header (not one of a nested child CE).
+      let preview = null;
+      for (const candidate of body.querySelectorAll('.element-preview-header')) {
+        if (candidate.closest('.t3-page-ce') === ce) {
+          preview = candidate;
+          break;
+        }
+      }
+      if (!preview || header.contains(preview)) {
+        return;
+      }
+      const placeholder = document.createElement('span');
+      placeholder.className = 'vitec-preview-header-placeholder';
+      placeholder.hidden = true;
+      preview.before(placeholder);
+      preview.classList.add('vitec-preview-header--in-header');
+      const headerRight = header.querySelector('.t3-page-ce-header-right');
+      if (headerRight) {
+        headerRight.insertAdjacentElement('afterend', preview);
+      } else {
+        header.appendChild(preview);
+      }
+    } else {
+      const preview = header.querySelector('.element-preview-header.vitec-preview-header--in-header');
+      const placeholder = body.querySelector('.vitec-preview-header-placeholder');
+      if (preview && placeholder) {
+        preview.classList.remove('vitec-preview-header--in-header');
+        placeholder.replaceWith(preview);
+      } else if (preview) {
+        preview.classList.remove('vitec-preview-header--in-header');
+        body.prepend(preview);
+      }
+    }
+  }
 }
 
 export default new VitecContainerCollapse();