@ptcwebops/ptcw-design 6.4.13 → 6.4.14-beta

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

@@ -3,33 +3,19 @@ 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;
-        }
-      }
-      // 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') {
+        //   if (!this.show) {
+        //     const id= (event.target as HTMLElement).getAttribute('id');
+        //     localStorage.setItem('modalId', id);
+        //   }
+        // }
       }
     };
     this.handleMouseDown = () => {
@@ -62,7 +48,7 @@ export class PtcModal {
   }
   onShowChange(newValue) {
     if (newValue) {
-      this.lastFocusElement = document.activeElement;
+      // this.lastFocusElement = document.activeElement as HTMLElement;
       this.fireOnOpened(this);
     }
     else {
@@ -159,7 +145,7 @@ export class PtcModal {
   }
   componentDidLoad() {
     if (this.show) {
-      this.lastFocusElement = document.activeElement;
+      // this.lastFocusElement = document.activeElement as HTMLElement;
       this.fireOnOpened(this);
     }
     if (this.showHeaderFooter) {
@@ -240,6 +226,20 @@ export class PtcModal {
         if (this.trap) {
           this.trap.deactivate();
         }
+        // // Code for returning the focus to the element which opened the modal
+        // const modalId = localStorage.getItem('modalId');
+        // if (!modalId) return;
+        // const focusItem = document.querySelector<HTMLElement>(`#${modalId}`);
+        // if (!focusItem || focusItem.id !== modalId) return;
+        // // Focus the host element
+        // focusItem.focus();
+        // // If it's a PTC-BUTTON, try focusing the internal native <button>
+        // if (focusItem.tagName === 'PTC-BUTTON' && focusItem.shadowRoot) {
+        //   const innerButton = focusItem.shadowRoot.querySelector<HTMLElement>('button');
+        //   innerButton?.focus();
+        // }
+        // // Clean up localStorage
+        // localStorage.removeItem('modalId');
       } })));
     let bottomCloseBtnEle = (h("div", { tabindex: "0", class: "bottom-close", id: "modal-bottom-close", onClick: (e) => {
         e.preventDefault();
@@ -355,8 +355,8 @@ export class PtcModal {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "| \"sm\"\r\n\t\t| \"md\"\r\n\t\t| \"lg\"\r\n\t\t| \"xl\"\r\n\t\t| \"max\"\r\n\t\t| \"sm-modal\"",
-          "resolved": "\"lg\" | \"max\" | \"md\" | \"sm\" | \"sm-modal\" | \"xl\"",
+          "original": "| \"sm\"\r\n\t\t| \"md\"\r\n\t\t| \"lg\"\r\n\t\t| \"xl\"\r\n\t\t| \"fit-content\"\r\n\t\t| \"max\"\r\n\t\t| \"sm-modal\"",
+          "resolved": "\"fit-content\" | \"lg\" | \"max\" | \"md\" | \"sm\" | \"sm-modal\" | \"xl\"",
           "references": {}
         },
         "required": false,

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

@@ -144,7 +144,10 @@ export class PtcModalQuiz {
   render() {
     const ProgressDots = () => {
       return (h("div", { class: "dot-progress-bar" }, [...Array(this.totalQuestions).keys()].map((questionNumber) => {
-        return (h("div", null, h("div", { class: `dot-progress-circle ${questionNumber === this.currentQuestion - 1 ? "active" : ""}` }), questionNumber <
+        return (h("div", null, h("div", { class: `dot-progress-circle ${questionNumber ===
+            this.currentQuestion - 1
+            ? "active"
+            : ""}` }), questionNumber <
           this.totalQuestions - 1 ? (h("div", { class: "dot-progress-dash" }, h("div", { class: "dashed-line" }))) : null));
       })));
     };

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

@@ -206,13 +206,15 @@ ptc-footer {
   line-height: 24px;
   text-align: left;
   word-break: break-word;
-  hyphens: auto;
+  -webkit-hyphens: auto;
+          hyphens: auto;
   margin-bottom: 2px;
 }
 @media only screen and (min-width: 1200px) {
   :host(.media-card) .nav-card-wrap .media-card-wrap h4 {
     font-size: 12px;
-    hyphens: auto;
+    -webkit-hyphens: auto;
+            hyphens: auto;
     line-height: 18px;
     text-align: left;
     margin-bottom: 2px;
@@ -226,6 +228,7 @@ ptc-footer {
   font-stretch: normal;
   font-style: normal;
   font-weight: 400;
+  -webkit-hyphens: auto;
   hyphens: auto;
   letter-spacing: normal;
   line-height: 21px;

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

@@ -108,6 +108,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

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

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

@@ -61,7 +61,6 @@ export class PtcPicture {
       if (tempImg) {
         lazyLoadImages.observe(tempImg);
       }
-      this.observer = lazyLoadImages;
     }
     else {
       // fall back to setTimeout for Safari and IE
@@ -96,22 +95,6 @@ export class PtcPicture {
       }
     }
   }
-  //manually load image
-  async LoadImage() {
-    const image = this.el.shadowRoot.querySelector("img");
-    if (!image) {
-      return;
-    }
-    if (!image.src) {
-      image.src = this.setResponsiveBg();
-      image.onload = () => {
-        image.removeAttribute("data-src");
-      };
-    }
-    if (this.observer) {
-      this.observer.unobserve(image);
-    }
-  }
   render() {
     const classMap = this.getCssClassMap();
     const classMapHost = this.getCssClassMapHost();
@@ -509,29 +492,6 @@ export class PtcPicture {
       "oldSrc": {}
     };
   }
-  static get methods() {
-    return {
-      "LoadImage": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "HTMLImageElement": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      }
-    };
-  }
   static get elementRef() { return "el"; }
   static get listeners() {
     return [{

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

@@ -5583,14 +5583,17 @@ a: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),
 .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);
@@ -5599,38 +5602,47 @@ ptc-modal inline-form a,
 }
 .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,
+.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 {
@@ -5639,24 +5651,30 @@ ptc-modal inline-form a,
 }
 .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 {
@@ -5664,14 +5682,17 @@ ptc-modal inline-form a,
 }
 .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;
@@ -5679,14 +5700,17 @@ ptc-modal inline-form a,
 }
 .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);

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

@@ -1,111 +1,147 @@
-:host {
-  display: block;
-}
-
-.skeleton {
-	display: flex;
-	flex-direction: column;
-	&.centered {
-		justify-content: center;
-	}
-
-	&.padding-left-sm {
-		padding-left: 14px;
-	}
-}
-
-.skeleton-block {
-	height: 24px;
-	background: linear-gradient(
-		to right,
-		#f6f6f6 25%,
-		#e4e7e9 50%,
-		#f6f6f6 75%
-	);
-	background-size: 200% 100%;
-	margin-bottom: 8px;
-	border-radius: 4px;
-	animation: loading 2.5s ease-in-out infinite;
-	width: 100%;
-}
-
-.skeleton-block {
-	&.long {
-		width: 80%;
-	}
-
-	&.wide {
-		width: 70%;
-	}
-
-	&.wide-sm {
-		width: 60%;
-	}
-
-	&.medium {
-		width: 50%;
-	}
-
-	/* &.medium-md {
-		@include screen-md {
-			width: 50%;
-		}
-	} */
-
-	&.short {
-		width: 30%;
-	}
-
-	&.narrow {
-		width: 20%;
-	}	
-
-	&.center {
-		margin-left: auto;
-		margin-right: auto;
-	}
-
-	&.left {
-		margin-right: auto;
-	}
-
-	&.right {
-		margin-left: auto;
-	}
-
-  &.caption {
-    height: 32px;
-  }
-
-  &.para {
-    height: 96px;
-  }
-
-  &.text-body {
-    height: 192px;
-  }
-
-  &.button {
-    height: 48px;
-  }
-
-  &.small-para {
-    height: 40px;
-  }
-
-  &.divider {
-    height: 1px;
-  }
-
-  &.multi-line{
-    height: 24px;
-  }
-
-  &.title {
-    height: 16px;
-  }
-
-  &.line {
-    height: 8px;
-  }
-}
+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;
+    /* For Safari */
+    -webkit-hyphenate-limit-after: 3;
+    /* For Safari */
+    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;
+}
+
+.skeleton {
+  display: flex;
+  flex-direction: column;
+}
+.skeleton.centered {
+  justify-content: center;
+}
+.skeleton.padding-left-sm {
+  padding-left: 14px;
+}
+
+.skeleton-block {
+  height: 24px;
+  background: linear-gradient(to right, #f6f6f6 25%, #e4e7e9 50%, #f6f6f6 75%);
+  background-size: 200% 100%;
+  margin-bottom: 8px;
+  border-radius: 4px;
+  animation: loading 2.5s ease-in-out infinite;
+  width: 100%;
+}
+
+.skeleton-block {
+  /* &.medium-md {
+  	@include screen-md {
+  		width: 50%;
+  	}
+  } */
+}
+.skeleton-block.long {
+  width: 80%;
+}
+.skeleton-block.wide {
+  width: 70%;
+}
+.skeleton-block.wide-sm {
+  width: 60%;
+}
+.skeleton-block.medium {
+  width: 50%;
+}
+.skeleton-block.short {
+  width: 30%;
+}
+.skeleton-block.narrow {
+  width: 20%;
+}
+.skeleton-block.center {
+  margin-left: auto;
+  margin-right: auto;
+}
+.skeleton-block.left {
+  margin-right: auto;
+}
+.skeleton-block.right {
+  margin-left: auto;
+}
+.skeleton-block.caption {
+  height: 32px;
+}
+.skeleton-block.para {
+  height: 96px;
+}
+.skeleton-block.text-body {
+  height: 192px;
+}
+.skeleton-block.button {
+  height: 48px;
+}
+.skeleton-block.small-para {
+  height: 40px;
+}
+.skeleton-block.divider {
+  height: 1px;
+}
+.skeleton-block.multi-line {
+  height: 24px;
+}
+.skeleton-block.title {
+  height: 16px;
+}
+.skeleton-block.line {
+  height: 8px;
+}

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

@@ -12,7 +12,7 @@ export class PtcPreloader {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["ptc-preloader.css"]
+      "$": ["ptc-preloader.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/ptc-preloader-section/ptc-preloader-section.css

@@ -3720,8 +3720,7 @@ ptc-footer {
 .skeleton-homepage-toggle .block,
 .skeleton-blog-detail .skeleton-block,
 .skeleton-blog-detail .skeleton-jumbotron .skeleton-jumbotron-image,
-.skeleton-on-demand .skeleton-block,
-.ppc-skeleton-preloader .dots-loader {
+.skeleton-on-demand .skeleton-block {
     animation: none;
   }
 }