@ptcwebops/ptcw-design 6.3.21 → 6.3.22-beta

package/dist/collection/components/ptc-modal/ptc-modal.js

@@ -3,33 +3,28 @@ import { createFocusTrap } from 'focus-trap';
 export class PtcModal {
   constructor() {
     this.setReturnFocus = () => {
-      var _a, _b;
-      if (!this.lastFocusElement)
-        return;
-      // Try focusing the last focused element directly
-      if (this.lastFocusElement.tabIndex === 0) {
+      if (this.lastFocusElement instanceof HTMLElement) {
         this.lastFocusElement.focus();
-        return;
       }
-      // If it's inside a shadow DOM, try finding a focusable child
-      const shadowRoot = this.lastFocusElement.shadowRoot;
-      if (shadowRoot) {
-        const focusableElementList = shadowRoot.querySelectorAll('button, [tabindex]:not([tabindex="-1"])');
-        if (focusableElementList) {
-          let focusableElement = focusableElementList[focusableElementList.length - 1];
-          focusableElement.focus();
-          return;
+    };
+    this.trackLastFocusedElement = (event) => {
+      if (event.key === "Enter") {
+        let activeElement = document.activeElement;
+        // Traverse shadow DOM to get the innermost focused element
+        while (activeElement === null || activeElement === void 0 ? void 0 : activeElement.shadowRoot) {
+          activeElement = activeElement.shadowRoot.activeElement;
+        }
+        if (activeElement instanceof HTMLElement) {
+          this.lastFocusElement = activeElement;
         }
-      }
-      // As a fallback, try to find a focusable child within the element
-      const fallbackElement = (_b = (_a = this.lastFocusElement).querySelector) === null || _b === void 0 ? void 0 : _b.call(_a, 'button, [tabindex]:not([tabindex="-1"])');
-      if (fallbackElement instanceof HTMLElement) {
-        fallbackElement.focus();
       }
     };
     this.handleKeyPress = (event) => {
       if (event.key === 'Enter' || event.key === ' ' || event.key === 'Tab') {
         this.openedByKeyboard = true;
+        if (event.key === 'Enter') {
+          this.trackLastFocusedElement(event);
+        }
       }
     };
     this.handleMouseDown = () => {
@@ -57,12 +52,11 @@ export class PtcModal {
     this.headerOnlyText2 = undefined;
     this.bottomCloseBtn = undefined;
     this.openedByKeyboard = false;
-    this.focusBackElement = undefined;
     this.bodyOverflowSetting = undefined;
   }
   onShowChange(newValue) {
     if (newValue) {
-      this.lastFocusElement = document.activeElement;
+      // this.lastFocusElement = document.activeElement as HTMLElement;
       this.fireOnOpened(this);
     }
     else {
@@ -157,7 +151,7 @@ export class PtcModal {
   }
   componentDidLoad() {
     if (this.show) {
-      this.lastFocusElement = document.activeElement;
+      // this.lastFocusElement = document.activeElement as HTMLElement;
       this.fireOnOpened(this);
     }
     if (this.showHeaderFooter) {
@@ -213,15 +207,6 @@ export class PtcModal {
   }
   close() {
     this.show = false;
-    setTimeout(() => {
-      var _a, _b;
-      if (this.focusBackElement) {
-        (_a = this.focusBackElement) === null || _a === void 0 ? void 0 : _a.focus();
-        if (this.focusBackElement.tagName === "PTC-BUTTON") {
-          (_b = this.focusBackElement.shadowRoot.querySelector('button')) === null || _b === void 0 ? void 0 : _b.focus();
-        }
-      }
-    }, 100);
   }
   render() {
     let content;
@@ -342,8 +327,8 @@ export class PtcModal {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "'sm' | 'md' | 'lg' | 'xl' | 'max' | 'sm-modal'",
-          "resolved": "\"lg\" | \"max\" | \"md\" | \"sm\" | \"sm-modal\" | \"xl\"",
+          "original": "'sm' | 'md' | 'lg' | 'xl' | 'fit-content' | 'max' | 'sm-modal'",
+          "resolved": "\"fit-content\" | \"lg\" | \"max\" | \"md\" | \"sm\" | \"sm-modal\" | \"xl\"",
           "references": {}
         },
         "required": false,
@@ -673,23 +658,6 @@ export class PtcModal {
         },
         "attribute": "bottom-close-btn",
         "reflect": false
-      },
-      "focusBackElement": {
-        "type": "any",
-        "mutable": true,
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "focus-back-element",
-        "reflect": false
       }
     };
   }

package/dist/collection/components/ptc-nav-skip-to-content/ptc-nav-skip-to-content.css

@@ -79,11 +79,4 @@ ptc-link, ptc-square-card,
   font-style: normal;
   font-weight: var(--ptc-font-weight-bold);
   line-height: var(--ptc-line-height-p);
-}
-
-:host(.appended) {
-  position: relative;
-}
-:host(.appended) .skip-link:focus {
-  position: absolute;
 }

package/dist/collection/components/ptc-nav-skip-to-content/ptc-nav-skip-to-content.js

@@ -1,49 +1,24 @@
 import { Host, h } from '@stencil/core';
 export class PtcNavSkipToContent {
   constructor() {
-    this.escalated = false;
     this.hideOnScroll = () => {
       var _a, _b;
       let skipLink = (_b = (_a = this.hostEle) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('a.skip-link');
       skipLink === null || skipLink === void 0 ? void 0 : skipLink.blur();
     };
     this.escalateOnDom = () => {
-      if (this.appendSelector) {
-        const elem = document.querySelector(this.appendSelector);
-        const host = this.hostEle;
-        if (elem) {
-          elem.insertAdjacentElement('afterbegin', this.hostEle);
-          host.classList.add('appended');
-          this.escalated = true;
-        }
-      }
-      if (!this.escalated) {
-        const body = document.querySelector('body');
-        body.insertAdjacentElement('afterbegin', this.hostEle);
-      }
-    };
-    this.offsetCta = () => {
-      const link = this.hostEle.shadowRoot.querySelector('.skip-link');
-      link.style.left = `${this.xOffset}px`;
-      link.style.top = `${this.yOffset}px`;
+      const body = document.querySelector('body');
+      body.insertAdjacentElement('afterbegin', this.hostEle);
     };
     this.componentWillLoad = () => {
       this.escalateOnDom();
       window.addEventListener('scroll', this.hideOnScroll);
     };
-    this.componentDidLoad = () => {
-      if (this.appendSelector) {
-        this.offsetCta();
-      }
-    };
     this.disconnectedCallback = () => {
       window.removeEventListener('scroll', this.hideOnScroll);
     };
     this.buttonText = "Skip To Main Content";
     this.sectionId = "";
-    this.appendSelector = undefined;
-    this.xOffset = undefined;
-    this.yOffset = undefined;
   }
   scrollToSection(e) {
     e.preventDefault();
@@ -104,57 +79,6 @@ export class PtcNavSkipToContent {
         "attribute": "section-id",
         "reflect": false,
         "defaultValue": "\"\""
-      },
-      "appendSelector": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "append-selector",
-        "reflect": false
-      },
-      "xOffset": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "x-offset",
-        "reflect": false
-      },
-      "yOffset": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "y-offset",
-        "reflect": false
       }
     };
   }

package/dist/collection/components/ptc-para/ptc-para.css

@@ -104,6 +104,9 @@ p.main {
 p.primary-grey {
   color: var(--color-gray-10);
 }
+p.primary-green {
+  color: var(--color-green-06);
+}
 p.gray-darker {
   color: var(--color-gray-11);
 }

package/dist/collection/components/ptc-para/ptc-para.js

@@ -185,8 +185,8 @@ export class PtcPara {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'primary-grey' | 'white' | 'gray-darker'",
-          "resolved": "\"gray-darker\" | \"primary-grey\" | \"white\"",
+          "original": "'primary-grey' | 'primary-green' | 'white' | 'gray-darker'",
+          "resolved": "\"gray-darker\" | \"primary-green\" | \"primary-grey\" | \"white\"",
           "references": {}
         },
         "required": false,

package/dist/collection/components/ptc-podcast-card/ptc-podcast-card.css

@@ -5602,26 +5602,26 @@ a:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
 }
 
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-plm-grey a.light-link {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .background-plm-grey a.light-link {
   color: var(--color-blue-04);
   margin: -2px;
   border: 2px solid transparent;
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
   color: var(--color-blue-06);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
   transition: none;
   color: var(--color-blue-07);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
   color: var(--color-blue-05);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
   color: var(--color-gray-04) !important;
   cursor: not-allowed;
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .background-plm-grey a.light-link:focus-visible {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .background-plm-grey a.light-link:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);