-
@@ -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`
);
};