From 9166d67f22f3180d7ca412a33b28ccf4cfb2d90a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Wed, 27 May 2026 16:53:04 +0200
Subject: [PATCH] Activate process button on VSF list-card form input

---
 patterns/vsf-list-card.html | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/patterns/vsf-list-card.html b/patterns/vsf-list-card.html
index ce73c5b..36eb150 100644
--- a/patterns/vsf-list-card.html
+++ b/patterns/vsf-list-card.html
@@ -83,6 +83,25 @@
   </section>
 
   <script>
+    const formCard = document.querySelector('#layout-vsf-list-card .sg-form-sections-card');
+    const processButton = formCard?.querySelector('.sg-button--process');
+
+    const updateProcessButtonState = () => {
+      if (!formCard || !processButton) {
+        return;
+      }
+
+      const hasPulldownSelection = Array.from(formCard.querySelectorAll('[data-pulldown-option]'))
+        .some((option) => option.getAttribute('aria-checked') === 'true');
+      const hasTextInput = Array.from(formCard.querySelectorAll('input[type="text"], textarea'))
+        .some((field) => field.value.trim().length > 0);
+      const isActive = hasPulldownSelection || hasTextInput;
+
+      processButton.disabled = !isActive;
+      processButton.setAttribute('aria-disabled', String(!isActive));
+      processButton.classList.toggle('sg-button--process-inactive', !isActive);
+    };
+
     const updatePulldownSelectionState = (demo) => {
       const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
       const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');
@@ -101,6 +120,7 @@
       trigger.classList.toggle('sg-form-active', selectedCount > 0);
       trigger.dataset.componentState = selectedCount > 0 ? 'selected' : 'inactive-selectable';
       demo.dataset.componentState = selectedCount > 0 ? 'selected' : 'inactive-selectable';
+      updateProcessButtonState();
     };
 
     document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
@@ -148,6 +168,10 @@
     });
 
     document.querySelectorAll('.sg-pulldown-demo').forEach(updatePulldownSelectionState);
+    formCard?.querySelectorAll('input[type="text"], textarea').forEach((field) => {
+      field.addEventListener('input', updateProcessButtonState);
+    });
+    updateProcessButtonState();
 
     document.addEventListener('click', (event) => {
       if (event.target.closest('.sg-pulldown-demo')) {