Revert "Make Multiselektionspulldown fully interactive"

This reverts commit b81fd57e57.

patterns/multiselektionspulldown.html

@@ -47,57 +47,57 @@
                     <span>Nur Score "attraktiv"</span>
                   </label>
 
-                  <div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" data-active="false" data-decimals="1" aria-disabled="true">
+                  <div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" aria-disabled="true">
                     <span class="sg-label">Aktienbewertung</span>
                     <input class="sg-slider" type="range" min="0" max="10" step="0.1" value="6.5" disabled>
                     <span class="sg-slider-value">6.5</span>
-                    <button class="sg-activatable-remove sg-multiselect-pulldown__toggle" type="button" aria-label="Aktienbewertung aktivieren" data-action="toggle">+</button>
+                    <button class="sg-activatable-remove" type="button" aria-label="Aktienbewertung entfernen" hidden>&times;</button>
                   </div>
 
-                  <div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" data-active="false" data-decimals="1" aria-disabled="true">
+                  <div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" aria-disabled="true">
                     <span class="sg-label">Wachstum</span>
                     <input class="sg-slider" type="range" min="0" max="10" step="0.1" value="9.5" disabled>
                     <span class="sg-slider-value">9.5</span>
-                    <button class="sg-activatable-remove sg-multiselect-pulldown__toggle" type="button" aria-label="Wachstum aktivieren" data-action="toggle">+</button>
+                    <button class="sg-activatable-remove" type="button" aria-label="Wachstum entfernen" hidden>&times;</button>
                   </div>
 
-                  <div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" data-active="false" data-decimals="1" aria-disabled="true">
+                  <div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" aria-disabled="true">
                     <span class="sg-label">Profitabilität</span>
                     <input class="sg-slider" type="range" min="0" max="10" step="0.1" value="5.0" disabled>
                     <span class="sg-slider-value">5.0</span>
-                    <button class="sg-activatable-remove sg-multiselect-pulldown__toggle" type="button" aria-label="Profitabilität aktivieren" data-action="toggle">+</button>
+                    <button class="sg-activatable-remove" type="button" aria-label="Profitabilität entfernen" hidden>&times;</button>
                   </div>
 
-                  <div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" data-active="false" data-decimals="1" aria-disabled="true">
+                  <div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" aria-disabled="true">
                     <span class="sg-label">Stabilität</span>
                     <input class="sg-slider" type="range" min="0" max="10" step="0.1" value="6.5" disabled>
                     <span class="sg-slider-value">6.5</span>
-                    <button class="sg-activatable-remove sg-multiselect-pulldown__toggle" type="button" aria-label="Stabilität aktivieren" data-action="toggle">+</button>
+                    <button class="sg-activatable-remove" type="button" aria-label="Stabilität entfernen" hidden>&times;</button>
                   </div>
                 </div>
 
                 <div class="sg-multiselect-pulldown__section" aria-labelledby="kennzahlen-marktbewertung-max">
                   <h2 id="kennzahlen-marktbewertung-max" class="sg-sub-heading sg-multiselect-pulldown__section-title">Marktbewertung Maximum</h2>
 
-                  <div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" data-active="false" data-decimals="0" aria-disabled="true">
+                  <div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" aria-disabled="true">
                     <span class="sg-label">PE</span>
                     <input class="sg-slider" type="range" min="0" max="60" step="1" value="30" disabled>
                     <span class="sg-slider-value">30</span>
-                    <button class="sg-activatable-remove sg-multiselect-pulldown__toggle" type="button" aria-label="PE aktivieren" data-action="toggle">+</button>
+                    <button class="sg-activatable-remove" type="button" aria-label="PE entfernen" hidden>&times;</button>
                   </div>
 
-                  <div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" data-active="false" data-decimals="0" aria-disabled="true">
+                  <div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" aria-disabled="true">
                     <span class="sg-label">PE forw.</span>
                     <input class="sg-slider" type="range" min="0" max="50" step="1" value="25" disabled>
                     <span class="sg-slider-value">25</span>
-                    <button class="sg-activatable-remove sg-multiselect-pulldown__toggle" type="button" aria-label="PE forw. aktivieren" data-action="toggle">+</button>
+                    <button class="sg-activatable-remove" type="button" aria-label="PE forw. entfernen" hidden>&times;</button>
                   </div>
 
-                  <div class="sg-slider-row" data-activatable="true" data-active="true" data-decimals="1">
+                  <div class="sg-slider-row" data-activatable="true">
                     <span class="sg-label">PEG</span>
                     <input class="sg-slider" type="range" min="0" max="4" step="0.1" value="1.6">
                     <span class="sg-slider-value">1.6</span>
-                    <button class="sg-activatable-remove sg-multiselect-pulldown__toggle" type="button" aria-label="PEG deaktivieren" data-action="toggle">&times;</button>
+                    <button class="sg-activatable-remove" type="button" aria-label="PEG entfernen">&times;</button>
                   </div>
                 </div>
 
@@ -122,7 +122,7 @@
 
                   <div class="sg-multiselect-pulldown__row-label">
                     <span class="sg-label">Moat mindestens</span>
-                    <button class="sg-interaction-element sg-pulldown sg-multiselect-pulldown__compact-pulldown" type="button" aria-label="Moat mindestens Maessig" data-moat-options="Schwach|Maessig|Stark|Sehr stark" data-moat-index="1">Maessig</button>
+                    <button class="sg-interaction-element sg-pulldown sg-multiselect-pulldown__compact-pulldown" type="button" aria-label="Moat mindestens Maessig">Maessig</button>
                   </div>
                 </div>
               </div>
@@ -136,101 +136,5 @@
     </div>
   </section>
 
-  <script>
-    (() => {
-      const pattern = document.querySelector('[data-pattern="multiselektionspulldown"]');
-      if (!pattern) {
-        return;
-      }
-
-      const formatSliderValue = (row, value) => {
-        const decimals = Number(row.dataset.decimals || 0);
-        return Number(value).toFixed(decimals);
-      };
-
-      const updateSliderRowState = (row, isActive) => {
-        const slider = row.querySelector('.sg-slider');
-        const toggle = row.querySelector('[data-action="toggle"]');
-        const label = row.querySelector('.sg-label');
-        if (!slider || !toggle || !label) {
-          return;
-        }
-
-        row.dataset.active = String(isActive);
-        row.classList.toggle('sg-slider-row--inactive-selectable', !isActive);
-        row.setAttribute('aria-disabled', String(!isActive));
-        slider.disabled = !isActive;
-        toggle.textContent = isActive ? '×' : '+';
-        toggle.setAttribute(
-          'aria-label',
-          `${label.textContent?.trim() || 'Filter'} ${isActive ? 'deaktivieren' : 'aktivieren'}`
-        );
-      };
-
-      pattern.querySelectorAll('.sg-slider-row[data-activatable="true"]').forEach((row) => {
-        const slider = row.querySelector('.sg-slider');
-        const valueEl = row.querySelector('.sg-slider-value');
-        const toggle = row.querySelector('[data-action="toggle"]');
-
-        if (!slider || !valueEl || !toggle) {
-          return;
-        }
-
-        valueEl.textContent = formatSliderValue(row, slider.value);
-        updateSliderRowState(row, row.dataset.active === 'true');
-
-        slider.addEventListener('input', () => {
-          valueEl.textContent = formatSliderValue(row, slider.value);
-        });
-
-        toggle.addEventListener('click', () => {
-          updateSliderRowState(row, row.dataset.active !== 'true');
-        });
-      });
-
-      pattern.querySelectorAll('[data-component="checkbox-field"] .sg-checkbox-field').forEach((checkbox) => {
-        checkbox.addEventListener('click', () => {
-          const isChecked = checkbox.getAttribute('aria-checked') === 'true';
-          const nextState = !isChecked;
-          checkbox.setAttribute('aria-checked', String(nextState));
-          checkbox.classList.toggle('sg-form-active', nextState);
-          checkbox.classList.toggle('sg-checkbox-field--inactive-selectable', !nextState);
-        });
-      });
-
-      pattern.querySelectorAll('.sg-multiselect-pulldown__radio-row').forEach((group) => {
-        const options = Array.from(group.querySelectorAll('[role="radio"]'));
-        options.forEach((radio) => {
-          radio.addEventListener('click', () => {
-            options.forEach((other) => {
-              const selected = other === radio;
-              other.setAttribute('aria-checked', String(selected));
-              other.classList.toggle('sg-radio-field--inactive-selectable', !selected);
-            });
-          });
-        });
-      });
-
-      const moatButton = pattern.querySelector('.sg-multiselect-pulldown__compact-pulldown');
-      if (moatButton) {
-        const options = (moatButton.dataset.moatOptions || '')
-          .split('|')
-          .map((option) => option.trim())
-          .filter(Boolean);
-
-        moatButton.addEventListener('click', () => {
-          if (options.length === 0) {
-            return;
-          }
-          const currentIndex = Number(moatButton.dataset.moatIndex || 0);
-          const nextIndex = (currentIndex + 1) % options.length;
-          moatButton.dataset.moatIndex = String(nextIndex);
-          moatButton.textContent = options[nextIndex];
-          moatButton.setAttribute('aria-label', `Moat mindestens ${options[nextIndex]}`);
-        });
-      }
-    })();
-  </script>
-
 </body>
 </html>

styleguide.css

@@ -1743,11 +1743,6 @@ section + section {
   min-width: 7.5rem;
 }
 
-.sg-multiselect-pulldown__toggle {
-  font-size: 1.2rem;
-  line-height: 1;
-}
-
 @media (max-width: 48rem) {
   .sg-multiselect-pulldown-demo {
     width: 100%;