@ptcwebops/ptcw-design 6.3.7-beta → 6.3.7

package/dist/collection/components/organism-bundles/event-jumbotron-example/event-jumbotron-example.css

@@ -60,9 +60,14 @@ ptc-link, ptc-square-card,
 }
 
 .event-jumbotron {
-  margin-bottom: 3rem;
+  margin-bottom: calc(3rem - 5px);
   width: 100%;
 }
+@media only screen and (min-width: 992px) {
+  .event-jumbotron {
+    margin-bottom: 3rem;
+  }
+}
 
 .white-placeholder {
   position: absolute;
@@ -84,7 +89,7 @@ ptc-link, ptc-square-card,
   display: flex;
   gap: 24px;
   overflow-x: auto;
-  padding: 0 24px;
+  padding: 5px 24px;
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
   cursor: grab;
@@ -208,8 +213,7 @@ ptc-link, ptc-square-card,
     cursor: auto;
     transition: transform 0.3s ease-in-out;
     width: 100%;
-    padding-left: 0px;
-    padding-right: 0px;
+    padding: 0px;
   }
 
   .card {

package/dist/collection/components/organism-bundles/event-jumbotron-example/event-jumbotron-example.js

@@ -75,6 +75,7 @@ export class EventJumbotronExample {
             },
           });
           this.trap.activate();
+          this.setupTabNavigation(panel); //set up special navigation to no-content panel, skip tabindex=-1 container and focus on the A inside a shdow dom.
         }, 500);
       }
       else {
@@ -86,11 +87,43 @@ export class EventJumbotronExample {
     else if (!this.isDesktop) {
       if (!this.isDragging) {
         const modal = document.getElementById(`modal-${cardIndex}`);
-        console.log('open: ' + modal.id);
+        // console.log('open: ' + modal.id);
         modal.show = true;
       }
     }
   }
+  //Focus the ptc-button directly in the no content panel (tab navigation).
+  setupTabNavigation(panel) {
+    var _a;
+    if (panel.querySelector('.no-content-card')) {
+      const shadowButton = panel.querySelector('ptc-close-icon');
+      const closeButton = (_a = shadowButton.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.close-icon');
+      if (closeButton) {
+        closeButton.addEventListener('keydown', (event) => {
+          if (event.key === 'Tab' && !event.shiftKey) {
+            event.preventDefault();
+            this.focusShadowDomElement(panel);
+          }
+        });
+      }
+    }
+    else {
+      return;
+    }
+  }
+  focusShadowDomElement(panel) {
+    const card = panel.querySelector('.no-content-card');
+    if (card) {
+      const button = card.querySelector('ptc-button');
+      // console.log('button: ' + button.innerHTML);
+      if (button) {
+        const link = button.shadowRoot.querySelector('a');
+        if (link) {
+          link.focus();
+        }
+      }
+    }
+  }
   showPanel(card, panel) {
     if (this.activePanel)
       return;
@@ -159,7 +192,7 @@ export class EventJumbotronExample {
     document.addEventListener('keydown', event => {
       if (event.key === 'Tab' || event.key === 'Enter' || event.key === ' ') {
         this.openedWithKeyboard = true;
-        console.log('keyboard status: ' + this.openedWithKeyboard);
+        // console.log('keyboard status: ' + this.openedWithKeyboard);
       }
     });
     document.addEventListener('mousedown', () => {