@gov-design-system-ce/components 4.0.0 → 4.0.2

package/dist/cjs/gov-app.cjs.entry.js

@@ -5531,6 +5531,7 @@ class FormsPage extends HTMLElement {
   connectedCallback() {
     (() => {
       setTimeout(() => {
+        const selectedList = document.getElementById('selected');
         const moja = document.getElementById('moja');
         const da = document.getElementById('test-me-ujo');
         const po = document.getElementById('bagr');
@@ -5569,18 +5570,24 @@ class FormsPage extends HTMLElement {
             });
           });
         }
-        if (ms) {
+        if (ms && selectedList) {
           ms.addEventListener('gov-change', (e) => {
-            console.log('change', e);
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            e.detail.value.map((item) => {
+              const cta = document.createElement('button');
+              cta.innerHTML = item.name;
+              cta.addEventListener('click', () => {
+                ms.setSelectedOptions([{ value: 'a', name: 'Aneta' }]);
+              });
+              selectedList.appendChild(cta);
+            });
           });
+          ms.setOptions([{ value: 'a', name: 'Aneta' }, { value: 'b', name: 'Beata' }, { value: 't', name: 'Tomáš' }]);
           setTimeout(() => {
-            ms.setOptions([{ value: 'a', name: 'Aneta' }, { value: 'b', name: 'Beata' }, { value: 't', name: 'Tomáš' }]);
-            console.log('impl');
-            //ms.getSelectedOptions().then((t) => console.log(t))
-          }, 2000);
-          setTimeout(() => {
-            ms.setSelectedOption({ value: 'a', name: 'Aneta' });
-            console.log('sets');
+            //ms.setSelectedOption({value: 'a', name: 'Aneta'})
+            //ms.setSelectedOptions([{value: 'a', name: 'Aneta'}])
+            //console.log('sets');
             //ms.getSelectedOptions().then((t) => console.log(t))
           }, 5000);
         }
@@ -5602,6 +5609,8 @@ class FormsPage extends HTMLElement {
     })();
     this.innerHTML = `
 
+
+<div id="selected" style="border: 1px solid blue"></div>
 	<gov-form-control>
 				<gov-form-label size="m" slot="top">Multiselect</gov-form-label>
 				<gov-form-group>