diff --git a/patterns/multiselektions-pulldown.html b/patterns/multiselektions-pulldown.html index bc0acec..f9aaecc 100644 --- a/patterns/multiselektions-pulldown.html +++ b/patterns/multiselektions-pulldown.html @@ -14,12 +14,11 @@
-
+
- -
@@ -140,6 +139,7 @@ const trigger = demo.querySelector('.sg-pulldown-demo__trigger'); const selectableOptions = demo.querySelectorAll('[data-pulldown-option]'); const activatableRemove = demo.querySelector('[data-pulldown-activate-remove]'); + const forceActive = demo.dataset.forceActive === 'true'; if (!trigger || selectableOptions.length === 0) { return; @@ -150,16 +150,18 @@ }).length; const labelBase = trigger.dataset.labelBase || 'Auswahl'; - trigger.textContent = selectedCount > 0 ? `${labelBase} (${selectedCount})` : labelBase; - trigger.classList.toggle('sg-pulldown--selected', selectedCount > 0); - trigger.classList.toggle('sg-form-active', selectedCount > 0); - trigger.classList.toggle('sg-pulldown--inactive-selectable', selectedCount === 0); + trigger.textContent = forceActive + ? labelBase + : (selectedCount > 0 ? `${labelBase} (${selectedCount})` : labelBase); + trigger.classList.toggle('sg-pulldown--selected', forceActive || selectedCount > 0); + trigger.classList.toggle('sg-form-active', forceActive || selectedCount > 0); + trigger.classList.toggle('sg-pulldown--inactive-selectable', !forceActive && selectedCount === 0); if (activatableRemove) { - activatableRemove.hidden = selectedCount === 0; + activatableRemove.hidden = forceActive || selectedCount === 0; } trigger.setAttribute( 'aria-label', - selectedCount > 0 ? `${labelBase} mit aktiver Auswahl` : `${labelBase} ohne aktive Auswahl` + forceActive || selectedCount > 0 ? `${labelBase} mit aktiver Auswahl` : `${labelBase} ohne aktive Auswahl` ); };