@ptcwebops/ptcw-design 6.3.27-beta → 6.3.28-beta

package/dist/collection/components/ptc-related-card-rail/ptc-related-card-rail.js

@@ -1,12 +1,14 @@
 import { Host, h } from '@stencil/core';
+import { createFocusTrap } from 'focus-trap';
 export class PtcRelatedCardRail {
   constructor() {
+    //lastFocusElement: HTMLElement;
     this.setScreenBasedProps = () => {
       let windowWidth = window.innerWidth;
       let props = {
         contentContainerMargin: undefined,
         contentCards: undefined,
-        parahFontSize: undefined
+        parahFontSize: undefined,
       };
       if (windowWidth >= 2600) {
         props.contentCards = 3;
@@ -49,7 +51,7 @@ export class PtcRelatedCardRail {
         const content = contentCards[this.cardInView];
         contentContainer.scrollTo({
           left: content.offsetLeft - contentContainerMarginLeft,
-          behavior: "smooth"
+          behavior: 'smooth',
         });
       }
     };
@@ -59,12 +61,12 @@ export class PtcRelatedCardRail {
       let contentContainerMarginLeftString = window.getComputedStyle(contentContainer).marginLeft;
       let contentContainerMarginLeft = Number(contentContainerMarginLeftString.substring(0, contentContainerMarginLeftString.length - 2));
       let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
-      if (this.cardInView < (contentCards.length - this.screenBasedProps.contentCards)) {
+      if (this.cardInView < contentCards.length - this.screenBasedProps.contentCards) {
         this.cardInView += 1;
         const content = contentCards[this.cardInView];
         contentContainer.scrollTo({
           left: content.offsetLeft - contentContainerMarginLeft,
-          behavior: "smooth"
+          behavior: 'smooth',
         });
       }
     };
@@ -74,11 +76,42 @@ export class PtcRelatedCardRail {
         let documentHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight);
         let scrollTop = window.scrollY || (document.documentElement || document.body).scrollTop;
         let trackLength = documentHeight - windowHeight;
-        let percentageSrolled = Math.floor(scrollTop / trackLength * 100);
+        let percentageSrolled = Math.floor((scrollTop / trackLength) * 100);
         if (percentageSrolled >= 50) {
           this.el.style.display = 'block';
+          if (!this.focusTrap) {
+            this.focusTrap = createFocusTrap(this.el, {
+              escapeDeactivates: true,
+              returnFocusOnDeactivate: true,
+              setReturnFocus: "#last-focus",
+              onActivate: () => {
+                if (!this.openedByKeyboard) {
+                  this.focusTrap.pause(); // If opened by mouse, prevent immediate focus trapping
+                }
+              },
+              onDeactivate: () => {
+                // this.focusTrap?.deactivate();
+                // this.focusTrap = undefined;
+                console.log('Hello~~~ onDeactivate');
+                setTimeout(() => {
+                  this.closed = true;
+                }, 0);
+                //this.setReturnFocus();
+              },
+              tabbableOptions: {
+                getShadowRoot: true,
+              },
+            });
+            if (this.openedByKeyboard && this.closed === false) {
+              this.focusTrap.activate();
+            }
+          }
         }
         else {
+          if (this.focusTrap && this.closed === true) {
+            this.focusTrap.deactivate();
+            this.focusTrap = undefined;
+          }
           this.el.style.display = 'none';
         }
         let cardRailContainer = this.el.shadowRoot.querySelector('.card-rail-container');
@@ -92,6 +125,12 @@ export class PtcRelatedCardRail {
           }
         }
       }
+      else {
+        if (this.focusTrap) {
+          this.focusTrap.deactivate();
+          this.focusTrap = undefined;
+        }
+      }
     };
     this.handleOnResizeBehaviour = () => {
       var _a, _b;
@@ -105,44 +144,45 @@ export class PtcRelatedCardRail {
       });
       this.cardInView = 0;
     };
-    // Redirect focus to the target element
-    this.redirectFocus = (event) => {
-      if (event.key === 'Tab' && !event.shiftKey) {
-        const marker = document.getElementById('hidden-rail-marker');
-        const activeElement = document.activeElement;
-        if (marker && activeElement === marker) {
-          event.preventDefault();
-          setTimeout(() => {
-            if (this.targetElement) {
-              this.targetElement.focus();
-            }
-            else {
-              console.log('target ele reference not found');
-            }
-          }, 100);
+    this.handleKeyPress = (event) => {
+      if (event.key === 'Enter' || event.key === ' ' || event.key === 'Tab') {
+        this.openedByKeyboard = true;
+        if (this.focusTrap && this.closed === true) {
+          this.focusTrap.deactivate();
+          this.focusTrap = undefined;
+          console.log("flag");
         }
       }
     };
+    this.handleMouseDown = () => {
+      this.openedByKeyboard = false;
+    };
     this.footerQuerySelector = undefined;
-    this.railTitle = "Read More Case Studies";
+    this.railTitle = 'Read More Case Studies';
     this.closed = false;
     this.cardInView = 0;
     this.data = [];
     this.screenBasedProps = {
       contentContainerMargin: undefined,
       contentCards: undefined,
-      parahFontSize: undefined
+      parahFontSize: undefined,
     };
+    this.openedByKeyboard = false;
   }
   handleKeyClose(event) {
-    if (event.key === 'Enter') {
+    if (event.key === 'Enter' || event.key === 'Esc') {
       event.preventDefault();
-      this.closed = true;
+      if (this.focusTrap) {
+        this.focusTrap.deactivate();
+      }
+      else {
+        this.closed = true;
+      }
     }
   }
   connectedCallback() {
-    // Attach event listener to the marker
-    document.addEventListener('keydown', this.redirectFocus);
+    document.addEventListener('keydown', this.handleKeyPress, true);
+    document.addEventListener('mousedown', this.handleMouseDown, true);
   }
   componentWillLoad() {
     const relatedCards = this.el.querySelectorAll('[slot^="related-card-"]');
@@ -153,7 +193,7 @@ export class PtcRelatedCardRail {
           image: undefined,
           text: undefined,
           href: undefined,
-          altText: undefined
+          altText: undefined,
         };
         let cardImage = card.querySelector('img');
         let cardLink = card.querySelector('a');
@@ -173,12 +213,26 @@ export class PtcRelatedCardRail {
     window.addEventListener('resize', this.handleOnResizeBehaviour);
   }
   disconnectedCallback() {
-    // Clean up the event listener when the component is removed
-    document.removeEventListener('keydown', this.redirectFocus);
+    document.removeEventListener('keydown', this.handleKeyPress, true);
+    document.removeEventListener('mousedown', this.handleMouseDown, true);
+    if (this.focusTrap) {
+      this.focusTrap.deactivate();
+      this.focusTrap = undefined;
+    }
   }
   render() {
-    return (this.closed ? null :
-      h(Host, null, h("div", { class: "card-rail-container", id: "card-rail-reveal-tag" }, h("div", { class: "card-rail-header" }, h("div", { class: "card-rail-heading" }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-7", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-normal", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, this.railTitle)), h("div", { ref: (el) => (this.targetElement = el), id: "card-rail-close", class: "card-rail-close mf-listen", onKeyDown: (event) => this.handleKeyClose(event), onClick: () => { this.closed = true; }, tabindex: "0" }, h("icon-asset", { type: "ptc", size: "xx-small", name: "times", color: "gray" }))), h("div", { class: "card-rail-content" }, h("icon-asset", { id: "left-arrow", class: "mf-listen", type: "ptc", size: "small", name: "previous_button_arrow", color: "gray", onClick: this.handlePrevClick }), h("icon-asset", { id: "right-arrow", class: "mf-listen", type: "ptc", size: "small", name: "next_button_arrow", color: "gray", onClick: this.handleNextClick }), h("div", { class: "content-container" }, this.data.map((item, index) => h("div", { class: "content mf-listen", id: `card-rail-content-${index}`, onKeyDown: (event) => { event.key === 'Enter' && window.open(item.href); }, onClick: () => { window.open(item.href); }, tabindex: "0" }, h("div", { class: "content-image" }, h("img", { alt: item.altText, src: item.image })), h("div", { class: "content-text" }, h("ptc-para", { "ellipsis-line-cutoff": "3", "font-size": this.screenBasedProps.parahFontSize, "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, item.text)))))))));
+    return this.closed ? null : (h(Host, null, h("div", { class: "card-rail-container", id: "card-rail-reveal-tag" }, h("div", { class: "card-rail-header" }, h("div", { class: "card-rail-heading" }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-7", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-normal", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, this.railTitle)), h("div", { ref: el => (this.targetElement = el), id: "card-rail-close", class: "card-rail-close mf-listen", onKeyDown: event => this.handleKeyClose(event), onClick: () => {
+        if (this.focusTrap) {
+          this.focusTrap.deactivate();
+        }
+        else {
+          this.closed = true;
+        }
+      }, tabindex: "0" }, h("icon-asset", { type: "ptc", size: "xx-small", name: "times", color: "gray" }))), h("div", { class: "card-rail-content" }, h("icon-asset", { id: "left-arrow", class: "mf-listen", type: "ptc", size: "small", name: "previous_button_arrow", color: "gray", onClick: this.handlePrevClick }), h("icon-asset", { id: "right-arrow", class: "mf-listen", type: "ptc", size: "small", name: "next_button_arrow", color: "gray", onClick: this.handleNextClick }), h("div", { class: "content-container" }, this.data.map((item, index) => (h("div", { class: "content mf-listen", id: `card-rail-content-${index}`, onKeyDown: (event) => {
+        event.key === 'Enter' && window.open(item.href);
+      }, onClick: () => {
+        window.open(item.href);
+      }, tabindex: "0" }, h("div", { class: "content-image" }, h("img", { alt: item.altText, src: item.image })), h("div", { class: "content-text" }, h("ptc-para", { "ellipsis-line-cutoff": "3", "font-size": this.screenBasedProps.parahFontSize, "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, item.text))))))))));
   }
   static get is() { return "ptc-related-card-rail"; }
   static get encapsulation() { return "shadow"; }
@@ -227,7 +281,7 @@ export class PtcRelatedCardRail {
         },
         "attribute": "rail-title",
         "reflect": false,
-        "defaultValue": "\"Read More Case Studies\""
+        "defaultValue": "'Read More Case Studies'"
       }
     };
   }
@@ -236,7 +290,8 @@ export class PtcRelatedCardRail {
       "closed": {},
       "cardInView": {},
       "data": {},
-      "screenBasedProps": {}
+      "screenBasedProps": {},
+      "openedByKeyboard": {}
     };
   }
   static get elementRef() { return "el"; }