add support for tab children and carousel

blocks/carousel/carousel.js

@@ -20,4 +20,19 @@ export default function decorate(block) {
     buttons.append(button);
   });
   block.parentElement.append(buttons);
+
+  // listener for editor
+  window.addEventListener('changedSelectedComponent', (e) => {
+    const element = document.querySelector(e.detail);
+    if (element.parentElement?.classList.contains('carousel')) {
+      element.parentElement.scrollTo({ top: 0, left: element.offsetLeft - element.parentNode.offsetLeft, behavior: 'instant' });
+
+      const nthSlide = element.offsetLeft / element.parentNode.clientWidth;
+      const button = block.parentElement.querySelector(`.carousel-buttons > button:nth-child(${nthSlide + 1})`);
+      [...buttons.children].forEach((r) => r.classList.remove('selected'));
+      button.classList.add('selected');
+
+      window.dispatchEvent(new Event('ue:requestOverlayUpdate'));
+    }
+  });
 }

blocks/tabs/tabs.js

@@ -95,13 +95,14 @@ export default function decorate($block) {
       tab.$content.classList.remove('hidden');
     }
   });
-}
 
-window.addEventListener('changedSelectedComponent', (e) => {
-  const element = document.querySelector(e.detail);
-  if (element.classList.contains('tab-item')) {
-    const index = element.getAttribute('data-tab-index');
-    const button = document.querySelector(`button[data-tab-index="${index}"]`);
-    button.click();
-  }
-});
+  window.addEventListener('ue:changedSelectedComponent', (e) => {
+    const element = document.querySelector(e.detail);
+    const tab = element.classList.contains('tab-item') ? element : element.closest('.tab-item');
+    if (tab) {
+      const index = tab.getAttribute('data-tab-index');
+      const button = document.querySelector(`button[data-tab-index="${index}"]`);
+      button.click();
+    }
+  });
+}