@ptcwebops/ptcw-design 6.3.38 → 6.3.39-beta

package/dist/cjs/ptc-readmore.cjs.entry.js

@@ -11,19 +11,19 @@ const PtcReadmore = class {
     index.registerInstance(this, hostRef);
     this.readmoreToggle = index.createEvent(this, "readmoreToggle", 7);
     /**
-     * Handle keyboard interactions
-     */
+   * Handle keyboard interactions
+   */
     this.handleKeyDown = (event) => {
-      if (event.key !== "Enter")
+      if (event.key !== 'Enter')
         return;
-      const checkBoxEl = this.el.shadowRoot.querySelector("#expanded");
-      const cta = this.el.shadowRoot.querySelector(".read-more-cta-label");
+      const checkBoxEl = this.el.shadowRoot.querySelector('#expanded');
+      const cta = this.el.shadowRoot.querySelector('.read-more-cta-label');
       if (!checkBoxEl || !cta)
         return;
       checkBoxEl.checked = !checkBoxEl.checked;
       const isExpanded = checkBoxEl.checked;
-      cta.innerHTML = `<span>${isExpanded ? this.lessText || "" : this.moreText || ""}</span>`;
-      cta.classList.toggle("show-less-cta", isExpanded);
+      cta.innerHTML = `<span>${isExpanded ? this.lessText || '' : this.moreText || ''}</span>`;
+      cta.classList.toggle('show-less-cta', isExpanded);
       if (isExpanded) {
         // Focus on the first element with tabindex="-1" within 'ptc-readmore'
         const firstTabIndexMinusOne = this.el.querySelector('[tabindex="-1"]');
@@ -31,26 +31,26 @@ const PtcReadmore = class {
       }
       else {
         cta.focus();
-        const readMoreText = this.el.shadowRoot.querySelector(".read-more-text");
-        readMoreText === null || readMoreText === void 0 ? void 0 : readMoreText.classList.add("truncated");
+        const readMoreText = this.el.shadowRoot.querySelector('.read-more-text');
+        readMoreText === null || readMoreText === void 0 ? void 0 : readMoreText.classList.add('truncated');
       }
       this.setTabIndex();
       // if lessText content is not present then add tabindex=-1 to the more/less label
-      if (cta.textContent == "") {
-        cta.setAttribute("tabindex", "-1");
+      if (cta.textContent == '') {
+        cta.setAttribute('tabindex', '-1');
       }
     };
-    this.moreText = "read more";
+    this.moreText = 'read more';
     this.lessText = undefined;
-    this.readMorePosition = "right";
-    this.display = "inline";
-    this.visibleLines = "line2";
+    this.readMorePosition = 'right';
+    this.display = 'inline';
+    this.visibleLines = 'line2';
     this.visibleLinesCustom = undefined;
-    this.zIndex = "z-auto";
+    this.zIndex = 'z-auto';
     this.checked = false;
-    this.size = "small";
+    this.size = 'small';
     this.isIcon = false;
-    this.color = "blue";
+    this.color = 'blue';
     this.isContentSlotted = false;
   }
   async updateReadmoreStatus() {
@@ -60,13 +60,13 @@ const PtcReadmore = class {
   }
   addBtnTruncated() {
     const appRoot = this.el.shadowRoot;
-    const ps = appRoot.querySelectorAll(".read-more-text");
-    ps.forEach((p) => {
+    const ps = appRoot.querySelectorAll('.read-more-text');
+    ps.forEach(p => {
       // if (this.visibleCharacters){
       //   const truncatedText = p.textContent.slice(0, this.visibleCharacters);
       //   p.textContent = truncatedText;
       // }
-      p.classList[p.scrollHeight > p.clientHeight ? "add" : "remove"]("truncated");
+      p.classList[p.scrollHeight > p.clientHeight ? 'add' : 'remove']('truncated');
     });
   }
   // Created this function to initialize the truncate function on specific elements like tabs
@@ -75,7 +75,7 @@ const PtcReadmore = class {
     for (const element of Array.from(allTabHeaders)) {
       let tabHeader = element;
       if (tabHeader) {
-        tabHeader.addEventListener("click", () => {
+        tabHeader.addEventListener('click', () => {
           setTimeout(() => {
             this.addBtnTruncated();
           }, 100);
@@ -90,9 +90,9 @@ const PtcReadmore = class {
         this.addBtnTruncated();
       }
     });
-    this.enableAddTruncatedClass("tab-header");
-    this.enableAddTruncatedClass("ptc-ellipsis-dropdown");
-    this.enableAddTruncatedClass("ptc-product-card");
+    this.enableAddTruncatedClass('tab-header');
+    this.enableAddTruncatedClass('ptc-ellipsis-dropdown');
+    this.enableAddTruncatedClass('ptc-product-card');
     // added code for tabnavigation
     setTimeout(() => {
       this.setTabIndex();
@@ -106,27 +106,25 @@ const PtcReadmore = class {
       links = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
     }
     else {
-      let slot = (_b = this.el) === null || _b === void 0 ? void 0 : _b.querySelector("slot").assignedNodes();
-      links =
-        slot[0] instanceof HTMLElement
-          ? slot[0].querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
-          : null;
+      let slot = (_b = this.el) === null || _b === void 0 ? void 0 : _b.querySelector('slot').assignedNodes();
+      links = (slot[0] instanceof HTMLElement)
+        ? slot[0].querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
+        : null;
     }
     let bottom = 999999;
-    let rects = (_c = this.el.shadowRoot
-      .querySelector(".read-more-text")) === null || _c === void 0 ? void 0 : _c.getClientRects();
+    let rects = (_c = this.el.shadowRoot.querySelector('.read-more-text')) === null || _c === void 0 ? void 0 : _c.getClientRects();
     if (rects && rects.length > 0) {
       bottom = rects[0].bottom;
     }
     if (links) {
-      links.forEach((link) => {
+      links.forEach(link => {
         let linkRects = link.getClientRects();
         if (linkRects && linkRects.length > 0) {
           if (linkRects[0].top < bottom) {
-            link.setAttribute("tabindex", "0");
+            link.setAttribute('tabindex', '0');
           }
           else {
-            link.setAttribute("tabindex", "-1");
+            link.setAttribute('tabindex', '-1');
           }
         }
       });
@@ -140,14 +138,12 @@ const PtcReadmore = class {
     // check if the input box is checked
     this.checked = event.target.checked;
     // Getting cta element
-    const cta = this.el.shadowRoot.querySelector(".read-more-cta-label");
+    const cta = this.el.shadowRoot.querySelector('.read-more-cta-label');
     // Updating the cta text
     this.checked
-      ? (cta.innerHTML = `<span> ${this.lessText ? this.lessText : ""} </span>`)
-      : (cta.innerHTML = `<span> ${this.moreText ? this.moreText : ""}</span>`);
-    this.checked
-      ? cta.classList.add("show-less-cta")
-      : cta.classList.remove("show-less-cta");
+      ? cta.innerHTML = `<span> ${this.lessText ? this.lessText : ''} </span>`
+      : cta.innerHTML = `<span> ${this.moreText ? this.moreText : ''}</span>`;
+    this.checked ? cta.classList.add('show-less-cta') : cta.classList.remove('show-less-cta');
     // Emit the state change event
     this.readmoreToggle.emit({
       event: event,
@@ -156,8 +152,8 @@ const PtcReadmore = class {
     });
     if (links) {
       if (this.checked) {
-        links.forEach((link) => {
-          link.setAttribute("tabindex", "0");
+        links.forEach(link => {
+          link.setAttribute('tabindex', '0');
         });
       }
       else {
@@ -167,16 +163,14 @@ const PtcReadmore = class {
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (index.h(index.Host, { class: this.display }, index.h("div", { class: classMap }, index.h("input", { type: "checkbox", id: "expanded", onClick: (e) => this.handleClick(e), tabIndex: -1 }), !!this.visibleLines || !!this.visibleLinesCustom ? (index.h("p", { class: `read-more-text ${this.visibleLines}`, style: {
-        WebkitLineClamp: `${this.visibleLinesCustom}`,
-      } }, index.h("slot", null))) : null, index.h("label", { onKeyDown: this.handleKeyDown, htmlFor: "expanded", role: "button", class: `${this.zIndex + " " + this.readMorePosition} read-more-cta-label mf-listen`, tabIndex: 0 }, index.h("span", null, this.moreText)))));
+    return (index.h(index.Host, { class: this.display }, index.h("div", { class: classMap }, index.h("input", { type: "checkbox", id: "expanded", onClick: (e) => this.handleClick(e), tabIndex: -1 }), !!this.visibleLines || !!this.visibleLinesCustom ? index.h("p", { class: `read-more-text ${this.visibleLines}`, style: { WebkitLineClamp: `${this.visibleLinesCustom}` } }, index.h("slot", null)) : null, index.h("label", { onKeyDown: this.handleKeyDown, htmlFor: "expanded", role: "button", class: `${this.zIndex + ' ' + this.readMorePosition} read-more-cta-label mf-listen`, tabIndex: 0 }, index.h("span", null, this.moreText)))));
   }
   getCssClassMap() {
     return {
-      ["box"]: true,
+      ['box']: true,
       [this.color]: true,
       [this.size]: true,
-      ["add-icon"]: this.isIcon,
+      ['add-icon']: this.isIcon
     };
   }
   get el() { return index.getElement(this); }

package/dist/cjs/ptc-related-card-rail.cjs.entry.js

@@ -5,38 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-63ddc79c.js');
 const focusTrap_esm = require('./focus-trap.esm-8c5a8938.js');
 
-const ptcRelatedCardRailCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block;}:host .card-rail-container{position:fixed;bottom:132px;left:24px;width:calc(100vw - 48px);background:white;border-radius:var(--ptc-border-radius-standard);box-shadow:var(--ptc-shadow-small);box-sizing:border-box;z-index:50}:host .card-rail-header{display:flex;justify-content:space-between;border-bottom:var(--color-gray-02) solid 1px}:host .card-rail-heading{margin:12px 0 12px 16px}:host .card-rail-close{padding:15px;cursor:pointer}:host .card-rail-close:focus-visible{outline:5px solid var(--keyboard-nav-outline) !important;border-radius:var(--ptc-border-radius-standard) !important}:host .card-rail-content{display:flex;align-items:center}:host .card-rail-content icon-asset{position:absolute;z-index:55px;padding:13px;}:host .card-rail-content icon-asset#left-arrow{left:3px;cursor:pointer}:host .card-rail-content icon-asset#right-arrow{right:3px;cursor:pointer}:host .card-rail-content .content-container{margin:24px 50px 24px 50px;display:flex;overflow-x:hidden;-ms-overflow-style:none;scrollbar-width:none;}:host .card-rail-content .content-container::-webkit-scrollbar{display:none}:host .card-rail-content .content-container .content{flex:1 0 calc(100% - 10px);display:flex;padding:5px}:host .card-rail-content .content-container .content:hover{cursor:pointer}:host .card-rail-content .content-container .content:focus-visible{outline:5px solid var(--keyboard-nav-outline) !important;border-radius:var(--ptc-border-radius-standard) !important;outline-offset:-5px}:host .card-rail-content .content-container .content .content-image{width:130px;height:73px;text-align:center}:host .card-rail-content .content-container .content .content-image img{width:100%;height:100%;object-fit:cover}:host .card-rail-content .content-container .content .content-text{flex:1;padding-left:12px}@media only screen and (min-width: 768px){:host .card-rail-container .card-rail-content icon-asset#left-arrow{left:11px;}:host .card-rail-container .card-rail-content icon-asset#right-arrow{right:11px}:host .card-rail-container .card-rail-content .content-container{margin:24px 66px 24px 66px;}:host .card-rail-container .card-rail-content .content-container .content{flex:1 0 50%}:host .card-rail-container .card-rail-content .content-container .content .content-text{padding-right:16px}}@media only screen and (min-width: 992px){:host .card-rail-container .card-rail-content icon-asset#left-arrow{left:19px;}:host .card-rail-container .card-rail-content icon-asset#right-arrow{right:19px}:host .card-rail-container .card-rail-content .content-container{margin:24px 82px 24px 82px;}}@media only screen and (min-width: 1200px){:host .card-rail-container{left:134px;width:calc(100vw - 268px)}}@media only screen and (min-width: 1440px){:host .card-rail-container{left:32px;width:932px}}@media only screen and (min-width: 1600px){:host .card-rail-container{left:32px;width:1328px}:host .card-rail-container .card-rail-content .content-container .content{flex:1 0 33.33%}}";
+const ptcRelatedCardRailCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block;}:host .card-rail-container{position:fixed;bottom:132px;left:24px;width:calc(100vw - 48px);background:white;border-radius:var(--ptc-border-radius-standard);box-shadow:var(--ptc-shadow-small);box-sizing:border-box;z-index:50}:host .card-rail-header{display:flex;justify-content:space-between;border-bottom:var(--color-gray-02) solid 1px}:host .card-rail-heading{margin:12px 0 12px 16px}:host .card-rail-close{padding:15px;cursor:pointer}:host .card-rail-close:focus-visible{outline:5px solid var(--keyboard-nav-outline) !important;border-radius:var(--ptc-border-radius-standard) !important}:host .card-rail-content{display:flex;align-items:center}:host .card-rail-content icon-asset{position:absolute;z-index:55px;padding:13px;}:host .card-rail-content icon-asset#left-arrow{left:3px;cursor:pointer}:host .card-rail-content icon-asset#right-arrow{right:3px;cursor:pointer}:host .card-rail-content .content-container{margin:24px 50px 24px 50px;display:flex;overflow-x:hidden;-ms-overflow-style:none;scrollbar-width:none;}:host .card-rail-content .content-container::-webkit-scrollbar{display:none}:host .card-rail-content .content-container .content{flex:1 0 calc(100% - 10px);display:flex;padding:5px}:host .card-rail-content .content-container .content:hover{cursor:pointer}:host .card-rail-content .content-container .content:focus-visible{outline:5px solid var(--keyboard-nav-outline) !important;border-radius:var(--ptc-border-radius-standard) !important;outline-offset:-5px}:host .card-rail-content .content-container .content .content-image{width:130px;height:73px;text-align:center}:host .card-rail-content .content-container .content .content-image img{width:100%;height:100%;object-fit:cover}:host .card-rail-content .content-container .content .content-text{flex:1;padding-left:12px}@media only screen and (min-width: 768px){:host .card-rail-container .card-rail-content icon-asset#left-arrow{left:11px}:host .card-rail-container .card-rail-content icon-asset#right-arrow{right:11px}:host .card-rail-container .card-rail-content .content-container{margin:24px 66px 24px 66px;}:host .card-rail-container .card-rail-content .content-container .content{flex:1 0 50%}:host .card-rail-container .card-rail-content .content-container .content .content-text{padding-right:16px}}@media only screen and (min-width: 992px){:host .card-rail-container .card-rail-content icon-asset#left-arrow{left:19px;}:host .card-rail-container .card-rail-content icon-asset#right-arrow{right:19px}:host .card-rail-container .card-rail-content .content-container{margin:24px 82px 24px 82px;}}@media only screen and (min-width: 1200px){:host .card-rail-container{left:134px;width:calc(100vw - 268px)}}@media only screen and (min-width: 1440px){:host .card-rail-container{left:32px;width:932px}}@media only screen and (min-width: 1600px){:host .card-rail-container{left:32px;width:1328px}:host .card-rail-container .card-rail-content .content-container .content{flex:1 0 33.33%}}";
 
 const PtcRelatedCardRail = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     //lastFocusElement: HTMLElement;
-    this.setFocusTrap = () => {
-      //console.log('this.focusTrap: ' + this.focusTrap)
-      if (!this.focusTrap) {
-        this.focusTrap = focusTrap_esm.createFocusTrap(this.el, {
-          escapeDeactivates: true,
-          returnFocusOnDeactivate: true,
-          onActivate: () => {
-            if (!this.openedByKeyboard) {
-              this.focusTrap.pause(); // If opened by mouse, prevent immediate focus trapping
-            }
-          },
-          onDeactivate: () => {
-            setTimeout(() => {
-              this.closed = true;
-            }, 0);
-          },
-          tabbableOptions: {
-            getShadowRoot: true,
-          },
-        });
-      }
-      if (this.isVisible === true && this.openedByKeyboard === true) {
-        this.focusTrap && this.focusTrap.activate();
-        //console.log('activate focus trap');
-      }
-    };
     this.setScreenBasedProps = () => {
       let windowWidth = window.innerWidth;
       let props = {
@@ -46,87 +20,109 @@ const PtcRelatedCardRail = class {
       };
       if (windowWidth >= 2600) {
         props.contentCards = 3;
-        props.parahFontSize = "xx-small";
+        props.parahFontSize = 'xx-small';
       }
       else if (windowWidth >= 1980) {
         props.contentCards = 3;
-        props.parahFontSize = "xx-small";
+        props.parahFontSize = 'xx-small';
       }
       else if (windowWidth >= 1440) {
         props.contentCards = 2;
-        props.parahFontSize = "xx-small";
+        props.parahFontSize = 'xx-small';
       }
       else if (windowWidth >= 1200) {
         props.contentCards = 2;
-        props.parahFontSize = "xx-small";
+        props.parahFontSize = 'xx-small';
       }
       else if (windowWidth >= 992) {
         props.contentCards = 2;
-        props.parahFontSize = "xx-small";
+        props.parahFontSize = 'xx-small';
       }
       else if (windowWidth >= 768) {
         props.contentCards = 2;
-        props.parahFontSize = "xxx-small";
+        props.parahFontSize = 'xxx-small';
       }
       else {
         props.contentCards = 1;
-        props.parahFontSize = "xxx-small";
+        props.parahFontSize = 'xxx-small';
       }
       this.screenBasedProps = Object.assign({}, props);
     };
     this.handlePrevClick = () => {
       var _a, _b;
-      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector(".content-container");
+      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.content-container');
       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");
+      let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
       if (this.cardInView > 0) {
         this.cardInView -= 1;
         const content = contentCards[this.cardInView];
         contentContainer.scrollTo({
           left: content.offsetLeft - contentContainerMarginLeft,
-          behavior: "smooth",
+          behavior: 'smooth',
         });
       }
     };
     this.handleNextClick = () => {
       var _a, _b;
-      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector(".content-container");
+      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.content-container');
       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) {
+      let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
+      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',
         });
       }
     };
     this.handleOnScrollBehaviour = () => {
       if (!this.closed) {
-        let windowHeight = window.innerHeight ||
-          (document.documentElement || document.body).clientHeight;
+        let windowHeight = window.innerHeight || (document.documentElement || document.body).clientHeight;
         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 scrollTop = window.scrollY || (document.documentElement || document.body).scrollTop;
         let trackLength = documentHeight - windowHeight;
         let percentageSrolled = Math.floor((scrollTop / trackLength) * 100);
         if (percentageSrolled >= 50) {
-          this.el.style.display = "block";
-          this.isVisible = true;
+          this.el.style.display = 'block';
+          if (!this.focusTrap) {
+            this.focusTrap = focusTrap_esm.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";
-          this.isVisible = false;
+          this.el.style.display = 'none';
         }
-        let cardRailContainer = this.el.shadowRoot.querySelector(".card-rail-container");
+        let cardRailContainer = this.el.shadowRoot.querySelector('.card-rail-container');
         let pageFooter = document.querySelector(this.footerQuerySelector);
         if (pageFooter) {
           let pageFooterTop = pageFooter.getBoundingClientRect().top;
@@ -147,22 +143,22 @@ const PtcRelatedCardRail = class {
     this.handleOnResizeBehaviour = () => {
       var _a, _b;
       this.setScreenBasedProps();
-      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector(".content-container");
+      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.content-container');
       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");
+      let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
       contentContainer.scrollTo({
         left: contentCards[0].offsetLeft - contentContainerMarginLeft,
       });
       this.cardInView = 0;
     };
     this.handleKeyPress = (event) => {
-      if (event.key === "Enter" || event.key === " " || event.key === "Tab") {
+      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');
+          console.log("flag");
         }
       }
     };
@@ -170,8 +166,7 @@ const PtcRelatedCardRail = class {
       this.openedByKeyboard = false;
     };
     this.footerQuerySelector = undefined;
-    this.railTitle = "Read More Case Studies";
-    this.isVisible = false;
+    this.railTitle = 'Read More Case Studies';
     this.closed = false;
     this.cardInView = 0;
     this.data = [];
@@ -182,39 +177,36 @@ const PtcRelatedCardRail = class {
     };
     this.openedByKeyboard = false;
   }
-  onVisibleChanged(newValue) {
-    if (newValue) {
-      this.setFocusTrap();
-      //console.log('isVisible: ' + this.isVisible);
-    }
-  }
   handleKeyClose(event) {
-    if (event.key === "Enter" || event.key === "Esc") {
+    if (event.key === 'Enter' || event.key === 'Esc') {
       event.preventDefault();
+      if (this.focusTrap) {
+        this.focusTrap.deactivate();
+      }
       this.closed = true;
     }
   }
   connectedCallback() {
-    document.addEventListener("keydown", this.handleKeyPress, true);
-    document.addEventListener("mousedown", this.handleMouseDown, true);
+    document.addEventListener('keydown', this.handleKeyPress, true);
+    document.addEventListener('mousedown', this.handleMouseDown, true);
   }
   componentWillLoad() {
     const relatedCards = this.el.querySelectorAll('[slot^="related-card-"]');
     for (let ind in relatedCards) {
       let card = relatedCards[ind];
-      if (card.tagName === "DIV") {
+      if (card.tagName === 'DIV') {
         let cardData = {
           image: undefined,
           text: undefined,
           href: undefined,
           altText: undefined,
         };
-        let cardImage = card.querySelector("img");
-        let cardLink = card.querySelector("a");
-        cardData.image = cardImage.getAttribute("src");
-        cardData.altText = cardImage.getAttribute("alt");
+        let cardImage = card.querySelector('img');
+        let cardLink = card.querySelector('a');
+        cardData.image = cardImage.getAttribute('src');
+        cardData.altText = cardImage.getAttribute('alt');
         cardData.text = cardLink.innerText;
-        cardData.href = cardLink.getAttribute("href");
+        cardData.href = cardLink.getAttribute('href');
         this.data.push(cardData);
         card.remove();
       }
@@ -223,35 +215,30 @@ const PtcRelatedCardRail = class {
     this.setScreenBasedProps();
   }
   componentDidLoad() {
-    window.addEventListener("scroll", this.handleOnScrollBehaviour);
-    window.addEventListener("resize", this.handleOnResizeBehaviour);
+    window.addEventListener('scroll', this.handleOnScrollBehaviour);
+    window.addEventListener('resize', this.handleOnResizeBehaviour);
   }
   disconnectedCallback() {
-    document.removeEventListener("keydown", this.handleKeyPress, true);
-    document.removeEventListener("mousedown", this.handleMouseDown, true);
+    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 : (index.h(index.Host, null, index.h("div", { class: "card-rail-container", id: "card-rail-reveal-tag" }, index.h("div", { class: "card-rail-header" }, index.h("div", { class: "card-rail-heading" }, index.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)), index.h("div", { ref: (el) => (this.targetElement = el), id: "card-rail-close", class: "card-rail-close mf-listen", onKeyDown: (event) => this.handleKeyClose(event), onClick: () => {
+    return this.closed ? null : (index.h(index.Host, null, index.h("div", { class: "card-rail-container", id: "card-rail-reveal-tag" }, index.h("div", { class: "card-rail-header" }, index.h("div", { class: "card-rail-heading" }, index.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)), index.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();
         }
         this.closed = true;
       }, tabindex: "0" }, index.h("icon-asset", { type: "ptc", size: "xx-small", name: "times", color: "gray" }))), index.h("div", { class: "card-rail-content" }, index.h("icon-asset", { id: "left-arrow", class: "mf-listen", type: "ptc", size: "small", name: "previous_button_arrow", color: "gray", onClick: this.handlePrevClick }), index.h("icon-asset", { id: "right-arrow", class: "mf-listen", type: "ptc", size: "small", name: "next_button_arrow", color: "gray", onClick: this.handleNextClick }), index.h("div", { class: "content-container" }, this.data.map((item, index$1) => (index.h("div", { class: "content mf-listen", id: `card-rail-content-${index$1}`, onKeyDown: (event) => {
-        event.key === "Enter" &&
-          window.open(item.href);
+        event.key === 'Enter' && window.open(item.href);
       }, onClick: () => {
         window.open(item.href);
-      }, tabindex: "0" }, index.h("div", { class: "content-image" }, index.h("img", { alt: item.altText, src: item.image })), index.h("div", { class: "content-text" }, index.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))))))))));
+      }, tabindex: "0" }, index.h("div", { class: "content-image" }, index.h("img", { alt: item.altText, src: item.image })), index.h("div", { class: "content-text" }, index.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))))))))));
   }
   get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "isVisible": ["onVisibleChanged"]
-  }; }
 };
 PtcRelatedCardRail.style = ptcRelatedCardRailCss;
 

package/dist/cjs/ptc-responsive-wrapper.cjs.entry.js

@@ -11,7 +11,7 @@ const PtcResponsiveWrapper = class {
     index.registerInstance(this, hostRef);
   }
   componentDidLoad() {
-    this.ro = new ResizeObserver((entries) => {
+    this.ro = new ResizeObserver(entries => {
       for (const entry of entries) {
         this.applySizeClasses(entry.contentRect.width);
       }

package/dist/cjs/ptc-scroll-button.cjs.entry.js

@@ -44,25 +44,24 @@ const PtcScrollButton = class {
     this.handleClick = () => {
       if (!this.scrollContainer)
         return;
-      const scrollValue = this.scrollAmount *
-        (this.direction === "left" || this.direction === "up" ? -1 : 1);
-      if (this.orientation === "horizontal") {
+      const scrollValue = this.scrollAmount * (this.direction === 'left' || this.direction === 'up' ? -1 : 1);
+      if (this.orientation === 'horizontal') {
         this.scrollContainer.scrollBy({
           left: scrollValue,
-          behavior: "smooth",
+          behavior: 'smooth',
         });
       }
-      else if (this.orientation === "vertical") {
+      else if (this.orientation === 'vertical') {
         this.scrollContainer.scrollBy({
           top: scrollValue,
-          behavior: "smooth",
+          behavior: 'smooth',
         });
       }
     };
     this.direction = undefined;
     this.scrollContainerClass = undefined;
     this.scrollAmount = 100;
-    this.orientation = "horizontal";
+    this.orientation = 'horizontal';
     this.trackerId = undefined;
     this.styles = undefined;
     this.isVisible = true;
@@ -72,12 +71,12 @@ const PtcScrollButton = class {
   componentWillLoad() {
     this.scrollContainer = document.querySelector(`.${this.scrollContainerClass}`);
     if (this.scrollContainer) {
-      this.scrollContainer.classList.add("hide-scrollbar");
+      this.scrollContainer.classList.add('hide-scrollbar');
       this.updateVisibility(); // Initial visibility check
-      this.scrollContainer.addEventListener("scroll", this.handleScroll);
+      this.scrollContainer.addEventListener('scroll', this.handleScroll);
     }
     else {
-      console.error("scrollContainer ele not found");
+      console.error('scrollContainer ele not found');
     }
   }
   componentDidLoad() {
@@ -88,7 +87,7 @@ const PtcScrollButton = class {
   }
   disconnectedCallback() {
     if (this.scrollContainer) {
-      this.scrollContainer.removeEventListener("scroll", this.handleScroll);
+      this.scrollContainer.removeEventListener('scroll', this.handleScroll);
       this.disableDragging();
     }
   }
@@ -96,38 +95,38 @@ const PtcScrollButton = class {
     this.updateVisibility();
   }
   enableDragging() {
-    this.scrollContainer.addEventListener("mousedown", this.startDragging);
-    this.scrollContainer.addEventListener("mousemove", this.performDragging);
-    ["mouseup", "mouseleave"].forEach((event) => this.scrollContainer.addEventListener(event, this.stopDragging));
+    this.scrollContainer.addEventListener('mousedown', this.startDragging);
+    this.scrollContainer.addEventListener('mousemove', this.performDragging);
+    ['mouseup', 'mouseleave'].forEach(event => this.scrollContainer.addEventListener(event, this.stopDragging));
   }
   disableDragging() {
-    this.scrollContainer.removeEventListener("mousedown", this.startDragging);
-    this.scrollContainer.removeEventListener("mousemove", this.performDragging);
-    ["mouseup", "mouseleave"].forEach((event) => this.scrollContainer.removeEventListener(event, this.stopDragging));
+    this.scrollContainer.removeEventListener('mousedown', this.startDragging);
+    this.scrollContainer.removeEventListener('mousemove', this.performDragging);
+    ['mouseup', 'mouseleave'].forEach(event => this.scrollContainer.removeEventListener(event, this.stopDragging));
   }
   updateVisibility() {
     if (!this.scrollContainer)
       return;
-    const { scrollLeft, scrollTop, scrollWidth, scrollHeight, clientWidth, clientHeight, } = this.scrollContainer;
-    if (this.orientation === "horizontal") {
-      if (this.direction === "left") {
+    const { scrollLeft, scrollTop, scrollWidth, scrollHeight, clientWidth, clientHeight } = this.scrollContainer;
+    if (this.orientation === 'horizontal') {
+      if (this.direction === 'left') {
         this.isVisible = scrollLeft > 0;
       }
-      else if (this.direction === "right") {
+      else if (this.direction === 'right') {
         this.isVisible = scrollLeft + clientWidth + 1 < scrollWidth; // "+1" adjustments after adding margin-right 40px
       }
     }
-    else if (this.orientation === "vertical") {
-      if (this.direction === "up") {
+    else if (this.orientation === 'vertical') {
+      if (this.direction === 'up') {
         this.isVisible = scrollTop > 0;
       }
-      else if (this.direction === "down") {
+      else if (this.direction === 'down') {
         this.isVisible = scrollTop + clientHeight < scrollHeight;
       }
     }
   }
   render() {
-    return (index.h(index.Host, { "is-dragging": this.isDragging }, this.styles && index.h("style", null, this.styles), this.isVisible && (index.h("button", { id: this.trackerId, onClick: this.handleClick, class: `scroll-btn ${this.direction}`, "aria-label": this.direction, tabindex: "0" }, this.direction === "left" && (index.h("icon-asset", { name: "left-scroll-arrow", size: "small", color: "white", type: "ptc", "injected-style": "svg:focus{outline:none;}" })), this.direction === "right" && (index.h("icon-asset", { name: "right-scroll-arrow", size: "small", color: "white", type: "ptc", "injected-style": "svg:focus{outline:none;}" })), this.direction === "up" && "▲", this.direction === "down" && "▼"))));
+    return (index.h(index.Host, { "is-dragging": this.isDragging }, this.styles && index.h("style", null, this.styles), this.isVisible && (index.h("button", { id: this.trackerId, onClick: this.handleClick, class: `scroll-btn ${this.direction}`, "aria-label": this.direction, tabindex: "0" }, this.direction === 'left' && index.h("icon-asset", { name: "left-scroll-arrow", size: "small", color: "white", type: "ptc", "injected-style": "svg:focus{outline:none;}" }), this.direction === 'right' && index.h("icon-asset", { name: "right-scroll-arrow", size: "small", color: "white", type: "ptc", "injected-style": "svg:focus{outline:none;}" }), this.direction === 'up' && '▲', this.direction === 'down' && '▼'))));
   }
 };
 PtcScrollButton.style = ptcScrollButtonCss;