diff --git a/patterns/vsf-list-detailseite.html b/patterns/vsf-list-detailseite.html index e638d84..4afb8aa 100644 --- a/patterns/vsf-list-detailseite.html +++ b/patterns/vsf-list-detailseite.html @@ -166,10 +166,33 @@ @@ -425,6 +448,39 @@ }); }); + const meldungenSaveButton = document.querySelector('[data-vsf-meldungen-save]'); + const meldungenCheckboxes = document.querySelectorAll('[data-vsf-meldungen-checkbox]'); + + const updateMeldungenSaveState = () => { + if (!meldungenSaveButton) { + return; + } + const hasSelection = Array.from(meldungenCheckboxes).some((checkbox) => checkbox.getAttribute('aria-checked') === 'true'); + meldungenSaveButton.disabled = !hasSelection; + meldungenSaveButton.setAttribute('aria-disabled', String(!hasSelection)); + meldungenSaveButton.classList.toggle('sg-button--process-inactive', !hasSelection); + }; + + meldungenCheckboxes.forEach((checkbox) => { + checkbox.addEventListener('click', () => { + if (checkbox.disabled) { + return; + } + + const option = checkbox.closest('[data-component="checkbox-field"]'); + const nextState = checkbox.getAttribute('aria-checked') !== 'true'; + checkbox.setAttribute('aria-checked', String(nextState)); + checkbox.classList.toggle('sg-form-active', nextState); + checkbox.classList.toggle('sg-checkbox-field--inactive-selectable', !nextState); + if (option) { + option.setAttribute('data-component-state', nextState ? 'active' : 'inactive-selectable'); + } + updateMeldungenSaveState(); + }); + }); + + updateMeldungenSaveState(); + const updatePulldownSelectionState = (demo) => { const trigger = demo.querySelector('.sg-pulldown-demo__trigger'); const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');