@ptcwebops/ptcw-design 6.0.7 → 6.0.9

package/dist/collection/components/ptc-media-card/ptc-media-card.js

@@ -52,7 +52,7 @@ export class PtcMediaCard {
       //   : null)}
       style: this.cardType != "case-study-icon" ?
         ((this.isHovered && this.hoverBackgroundImage) ? { backgroundImage: `url(${this.hoverBackgroundImage})` } : { backgroundImage: `url(${this.activeBackgroundImage})` }) : {} }, h("slot", { name: "seo-content" }), this.cardType != "case-study-icon" ?
-      (h(Tag, { class: 'anchor-wrap', target: this.target, href: this.cardHref, rel: this.rel, "aria-label": this.cardHref ? 'Read more about ' + this.ariaLabel : undefined }, isVideoUrl && (h("video", { muted: true, loop: true, playsinline: true, poster: this.activeBackgroundImage, ref: el => (this.videoEle = el), style: this.isHovered ? { display: 'block' } : { display: 'none' } }, h("source", { src: this.hoverBackgroundImage, type: "video/mp4" }, "Your browser does not support the video tag."))), this.cardType === "media-card" && h("ptc-overlay", { "filter-color": "black-2" }), this.cardType === "media-card" && this.getCardText())) : null, this.cardType === "case-study-icon" ? (h("div", { id: this.trackerId, class: "tracker-div" }, h("a", { class: "case-study-img-anchor mf-listen", target: this.target, href: this.cardHref, rel: this.rel, "aria-label": this.cardHref ? 'Read more about ' + this.ariaLabel : undefined }, h("img", { class: "case-study-bg-img", src: this.activeBackgroundImage, alt: this.activeBackgroundImageAlt }), h("div", { class: "after" }), h("img", { class: "case-study-icon-img", src: this.iconImage, alt: this.iconImageAlt }))))
+      (h(Tag, { class: 'anchor-wrap', target: this.target, href: this.cardHref, rel: this.rel, "aria-label": this.cardHref ? 'Read more about ' + this.ariaLabel : undefined }, isVideoUrl && (h("video", { muted: true, loop: true, playsinline: true, poster: this.activeBackgroundImage, ref: el => (this.videoEle = el), style: this.isHovered ? { display: 'block' } : { display: 'none' }, tabindex: "-1" }, h("source", { src: this.hoverBackgroundImage, type: "video/mp4" }, "Your browser does not support the video tag."))), this.cardType === "media-card" && h("ptc-overlay", { "filter-color": "black-2" }), this.cardType === "media-card" && this.getCardText())) : null, this.cardType === "case-study-icon" ? (h("div", { id: this.trackerId, class: "tracker-div" }, h("a", { class: "case-study-img-anchor mf-listen", target: this.target, href: this.cardHref, rel: this.rel, "aria-label": this.cardHref ? 'Read more about ' + this.ariaLabel : undefined }, h("img", { class: "case-study-bg-img", src: this.activeBackgroundImage, alt: this.activeBackgroundImageAlt }), h("div", { class: "after" }), h("img", { class: "case-study-icon-img", src: this.iconImage, alt: this.iconImageAlt }))))
       : null));
   }
   getCssClassMap() {

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

@@ -1754,6 +1754,148 @@ ptc-link, ptc-square-card,
   margin-bottom: 4px !important;
 }
 
+.preloader-generic-form .form-block-1 {
+  border-radius: 4px;
+  border: 8px solid var(--color-gray-02);
+  padding: 45px 32px;
+  margin-bottom: 118px;
+  display: block;
+}
+@media only screen and (min-width: 992px) {
+  .preloader-generic-form .form-block-1 {
+    display: none;
+  }
+}
+.preloader-generic-form .form-block-1 .form-block-skeleton {
+  padding-bottom: 37px;
+}
+.preloader-generic-form .form-block-2 {
+  border-radius: 4px;
+  border: 8px solid var(--color-gray-02);
+  padding: 45px 32px;
+  margin-bottom: 118px;
+  display: none;
+}
+@media only screen and (min-width: 992px) {
+  .preloader-generic-form .form-block-2 {
+    display: block;
+  }
+}
+.preloader-generic-form .form-block-2 .form-block-skeleton {
+  padding-bottom: 37px;
+}
+.preloader-generic-form .skeleton .skeleton-block.very-bold {
+  width: 60%;
+  height: 55px;
+}
+@media only screen and (min-width: 768px) {
+  .preloader-generic-form .skeleton .skeleton-block.very-bold {
+    width: 50%;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .preloader-generic-form .skeleton .skeleton-block.very-bold {
+    width: 40%;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-generic-form .skeleton .skeleton-block.very-bold {
+    width: 60%;
+  }
+}
+
+.pdf-skeleton-preloader .jumbotron-sec {
+  background: #fff;
+}
+.pdf-skeleton-preloader .section-1 {
+  padding-top: 60px;
+  padding-bottom: 222px;
+}
+.pdf-skeleton-preloader .section-1 .line-1 {
+  height: 44px;
+  width: 100%;
+  margin-bottom: 39px;
+}
+@media only screen and (min-width: 992px) {
+  .pdf-skeleton-preloader .section-1 .line-1 {
+    width: 70%;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .pdf-skeleton-preloader .section-1 .line-1 {
+    width: 50%;
+  }
+}
+.pdf-skeleton-preloader .section-1 .line-2 {
+  width: 100%;
+}
+@media only screen and (min-width: 1200px) {
+  .pdf-skeleton-preloader .section-1 .line-2 {
+    width: 90%;
+  }
+}
+.pdf-skeleton-preloader .section-1 .line-3 {
+  width: 97%;
+}
+@media only screen and (min-width: 1200px) {
+  .pdf-skeleton-preloader .section-1 .line-3 {
+    width: 87%;
+  }
+}
+.pdf-skeleton-preloader .section-1 .line-4 {
+  width: 95%;
+}
+@media only screen and (min-width: 1200px) {
+  .pdf-skeleton-preloader .section-1 .line-4 {
+    width: 85%;
+  }
+}
+.pdf-skeleton-preloader .pdf-area {
+  padding-bottom: 110px;
+}
+.pdf-skeleton-preloader .pdf-area .pdf-section {
+  background-color: #fff;
+  width: auto;
+}
+@media only screen and (min-width: 1440px) {
+  .pdf-skeleton-preloader .pdf-area .pdf-section {
+    width: 781px;
+    margin: auto;
+  }
+}
+.pdf-skeleton-preloader .pdf-area .pdf-section .top-border {
+  height: 48px;
+  background-color: var(--color-gray-03);
+}
+.pdf-skeleton-preloader .pdf-area .pdf-section .pdf-body {
+  padding-top: 60px;
+  padding-left: 24px;
+  padding-right: 24px;
+  padding-bottom: 58px;
+}
+@media only screen and (min-width: 992px) {
+  .pdf-skeleton-preloader .pdf-area .pdf-section .pdf-body {
+    padding-left: 155px;
+    padding-right: 155px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .pdf-skeleton-preloader .pdf-area .pdf-section .pdf-body {
+    padding-left: 247px;
+    padding-right: 247px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .pdf-skeleton-preloader .pdf-area .pdf-section .pdf-body {
+    padding-left: 70px;
+    padding-right: 70px;
+  }
+}
+.pdf-skeleton-preloader .pdf-area .pdf-section .pdf-body .skeleton .skeleton-block.thick-block {
+  height: 623px;
+  width: 100%;
+}
+
 @keyframes pulse {
   0% {
     opacity: 0.5;

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

@@ -60,6 +60,12 @@ export class PtcPreloaderSection {
       case 'value-led': {
         return (h("div", { class: "preloader-wrapper" }, h("div", { class: "preloader-value-led" }, h("div", { class: "hero-image" }), h("div", { class: "ptc-container content-container" }, h("div", { class: "content-container-child" }, h("div", { class: "is-grid has-col-gap-md" }, h("div", { class: "is-col-3-lg" }, h("div", { class: "skeleton container-child-1" }, h("div", { class: "is-grid block grid-1" }, h("div", { class: "is-col-12 is-placed-left" }, Array.from({ length: 8 }).map(() => (h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thinnest-1" }), h("div", { class: "skeleton-block thinnest-1 long-4" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" })))))))), h("div", { class: "is-col-12 is-col-9-lg" }, h("div", { class: "skeleton container-child-2" }, h("div", { class: "is-grid block grid-top" }, h("div", { class: "is-col-12 is-placed-left" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin smallest left" }), h("div", { class: "skeleton-block thick long-1" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block bold long-2" }), h("div", { class: "skeleton-block bold long-1" }), h("div", { class: "skeleton-block bold long-3" })))), h("div", { class: "grid-top-1" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block block-1" }))), h("div", { class: "skeleton-block bold" }), h("div", { class: "skeleton-block bold long-2" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block thinnnest longer" }), h("div", { class: "skeleton-block thinnnest longer" }), h("div", { class: "skeleton-block thinnnest longest" }), h("div", { class: "skeleton-block thinnnest long" }), h("div", { class: "skeleton-block thinnnest long-4" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block bold" }), h("div", { class: "skeleton-block bold long-2" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block thinnnest longer" }), h("div", { class: "skeleton-block thinnnest longer" }), h("div", { class: "skeleton-block thinnnest longest" }), h("div", { class: "skeleton-block thinnnest long" }), h("div", { class: "skeleton-block thinnnest long-4" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block thinnnest longer" }), h("div", { class: "skeleton-block thinnnest longer" }), h("div", { class: "skeleton-block thinnnest longest" }), h("div", { class: "skeleton-block thinnnest long" }), h("div", { class: "skeleton-block thinnnest long-4" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }))))), h("div", { class: "related-items" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" })))));
       }
+      case 'generic-form-with-image': {
+        return (h("div", { class: "preloader-wrapper" }, h("div", { class: "ptc-container skeleton-jumbotron" }, h("div", { class: "is-grid has-no-row-gap has-col-gap-lg" }, h("div", { class: "is-col-12 is-col-8-lg" }, h("div", { class: "sekleton" }, h("div", { class: "skeleton-block thin short" }), h("div", { class: "skeleton-block thick" }), h("div", { class: "skeleton-block thick" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block thin" }), h("div", { class: "skeleton-block thin medium" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "cta-wrap" }, h("div", { class: "skeleton-block cta" }), h("div", { class: "skeleton-block cta" })))))), h("div", { class: "ptc-container preloader-generic-form" }, h("div", { class: "is-grid block form-block-1" }, h("div", { class: "is-col-12" }, Array.from({ length: 7 }).map(() => (h("div", { class: "skeleton form-block-skeleton" }, h("div", { class: "skeleton-block bold" })))), h("div", { class: "skeleton" }, h("div", { class: "skeleton-block very-bold" })))), h("div", { class: "is-grid block" }, h("div", { class: "is-col-12-xs is-col-12-sm is-col-md-8" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin short" }), h("div", { class: "skeleton-block thin" }), h("div", { class: "skeleton-block thin" }), h("div", { class: "skeleton-block thin" }), h("div", { class: "skeleton-block thin medium" }), h("div", { class: "skeleton-block thin medium" }), h("div", { class: "skeleton-block thin medium" }))), h("div", { class: "is-col-12-xs is-col-12-sm is-col-4-md form-block-2" }, Array.from({ length: 7 }).map(() => (h("div", { class: "skeleton form-block-skeleton" }, h("div", { class: "skeleton-block bold" })))), h("div", { class: "skeleton" }, h("div", { class: "skeleton-block very-bold" })))))));
+      }
+      case 'pdf-skeleton': {
+        return (h("div", { class: "preloader-wrapper pdf-skeleton-preloader" }, h("div", { class: "jumbotron-sec" }, h("div", { class: "ptc-container skeleton-jumbotron" }, h("div", { class: "is-grid has-no-row-gap has-col-gap-lg" }, h("div", { class: "is-col-12 is-col-8-lg" }, h("div", { class: "sekleton" }, h("div", { class: "skeleton-block thin short" }), h("div", { class: "skeleton-block thick" }), h("div", { class: "skeleton-block thick" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block thin" }), h("div", { class: "skeleton-block thin medium" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "cta-wrap" }, h("div", { class: "skeleton-block cta" }))))))), h("div", { class: "ptc-container" }, h("div", { class: "section-1" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block line-1" }), h("div", { class: "skeleton-block line-2 thin" }), h("div", { class: "skeleton-block line-3 thin" }), h("div", { class: "skeleton-block line-4 thin" }))), h("div", { class: "pdf-area" }, h("div", { class: "pdf-section" }, h("div", { class: "top-border" }), h("div", { class: "pdf-body" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thick" }), h("div", { class: "skeleton-block thick" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block thin" }), h("div", { class: "skeleton-block thin medium" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block thick-block" }), h("div", { class: "skeleton-block thin" }), h("div", { class: "skeleton-block thin medium" }))))))));
+      }
       default:
         return (h("div", { class: "ptc-section-standard preload-min-height" }, h("div", { class: "ptc-container" }, h("max-width-container", { "max-width": "960", breakpoint: 1200 }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-header" }, h("div", { class: "skeleton-block bold" }), h("div", { class: "skeleton-block wide bold" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block medium" }), h("div", { class: "skeleton-block narrow" }), h("div", { class: "skeleton-block short" })), h("div", { class: "skeleton-image" }), h("div", { class: "skeleton-text" }, h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block long" }), h("div", { class: "skeleton-block narrow" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block medium" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block long" }), h("div", { class: "skeleton-block medium" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block long" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block medium" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block wide" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block short bold" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block wide" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block medium" })))))));
     }

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

@@ -59,7 +59,7 @@ export class PtcTitle {
         maxLinesShowCheck = t.scrollHeight > t.clientHeight;
       });
     }
-    const ifCharExceeds = (this.tooltipText.length > this.maxChars) && !this.maxLines;
+    const ifCharExceeds = this.tooltipText && (this.tooltipText.length > this.maxChars) && !this.maxLines;
     const ifLinesExceeds = this.maxLines && maxLinesShowCheck;
     if (show && this.enableTooltip) {
       if ((!existingTooltip && ifCharExceeds) || (!existingTooltip && ifLinesExceeds)) {

package/dist/collection/components/subnav/ptc-nav-slider/ptc-nav-slider.css

@@ -84,6 +84,7 @@ ptc-link, ptc-square-card,
   }
 }
 :host .navArrows {
+  cursor: pointer;
   display: inline-block;
 }
 :host .navArrows svg {

package/dist/collection/utils/utils.js

@@ -169,6 +169,43 @@ export function equalizeHeightsWithinShadow(selector, shadowRootOrHostElement) {
     element.style.height = `${tallestHeight}px`;
   });
 }
+export function nextUserInteractionEvent(sender) {
+  const baseInteractions = ['click', 'scroll', 'mousemove', 'touchstart'];
+  const context = globalThis.window;
+  const key = generateUUID();
+  return new Promise((resolve) => {
+    let keyChain = getHydrationKeyChain(context);
+    keyChain[key] = false;
+    baseInteractions.forEach(function (interaction) {
+      context.addEventListener(interaction, function () {
+        if (!keyChain[key]) {
+          keyChain[key] = true;
+          resolve({
+            sender: sender,
+            interactionType: interaction
+          });
+        }
+      }, {
+        once: true
+      });
+      setTimeout(() => {
+        if (!keyChain[key]) {
+          keyChain[key] = true;
+          resolve({
+            sender: sender,
+            interactionType: interaction
+          });
+        }
+      }, 5000);
+    });
+  });
+}
+function getHydrationKeyChain(context) {
+  if (!context.HydrationKeys) {
+    context.HydrationKeys = {};
+  }
+  return context.HydrationKeys;
+}
 /*
   observeInView:
     Trigger CSS Animations when elements are scrolled into view
@@ -200,6 +237,13 @@ export function observeInView(hostEle, selector, runOnce = false) {
   const allAnimatedElements = hostEle.shadowRoot.querySelectorAll(selector);
   allAnimatedElements.forEach((element) => observer.observe(element));
 }
+export function isHiddenUntilSupported() {
+  let elem = document.createElement("div");
+  elem.setAttribute('hidden', 'until-found');
+  let result = elem.hidden === 'until-found';
+  //console.debug(`is hidden until supported: ${(result?'yes':'no')}.`);
+  return result;
+}
 // retryHandler.ts
 export class RetryHandler {
   constructor(retries = 3, delay = 1000) {