@ptcwebops/ptcw-design 6.4.18 → 6.4.20-beta

package/dist/collection/components/organism-bundles/storefront-enhanced-product-list-example/storefront-enhanced-product-list-example.css

@@ -83,7 +83,8 @@ swiper-slide {
 }
 .swiper-backface-hidden .swiper-slide {
   transform: translateZ(0);
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 /* 3D Effects */
 .swiper-3d.swiper-css-mode .swiper-wrapper {
@@ -390,8 +391,7 @@ button.swiper-pagination-bullet {
   padding: 0;
   box-shadow: none;
   -webkit-appearance: none;
-          -moz-appearance: none;
-       appearance: none;
+          appearance: none;
 }
 .swiper-pagination-clickable .swiper-pagination-bullet {
   cursor: pointer;
@@ -559,8 +559,7 @@ button.swiper-pagination-bullet {
 .swiper-zoom-container > canvas {
   max-width: 100%;
   max-height: 100%;
-  -o-object-fit: contain;
-     object-fit: contain;
+  object-fit: contain;
 }
 .swiper-slide-zoomed {
   cursor: move;
@@ -606,7 +605,8 @@ swiper-container .swiper-notification {
 }
 .swiper-cube .swiper-slide {
   pointer-events: none;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   z-index: 1;
   visibility: hidden;
   transform-origin: 0 0;
@@ -635,7 +635,8 @@ swiper-container .swiper-notification {
 .swiper-cube .swiper-slide-shadow-left,
 .swiper-cube .swiper-slide-shadow-right {
   z-index: 0;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 .swiper-cube .swiper-cube-shadow {
   position: absolute;
@@ -661,7 +662,8 @@ swiper-container .swiper-notification {
 }
 .swiper-flip .swiper-slide {
   pointer-events: none;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   z-index: 1;
 }
 .swiper-flip .swiper-slide .swiper-slide {
@@ -676,10 +678,12 @@ swiper-container .swiper-notification {
 .swiper-flip .swiper-slide-shadow-left,
 .swiper-flip .swiper-slide-shadow-right {
   z-index: 0;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 .swiper-creative .swiper-slide {
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   overflow: hidden;
   transition-property: transform, opacity, height;
 }
@@ -688,7 +692,8 @@ swiper-container .swiper-notification {
 }
 .swiper-cards .swiper-slide {
   transform-origin: center bottom;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   overflow: hidden;
 }
 

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

@@ -48,7 +48,8 @@ export class PtcAnnouncement {
     // <ptc-tooltip text-display="inline" max-length="60" z-index="z-2" description={this.barTitle} position="bottom"></ptc-tooltip>
     h("ptc-tooltip-v2", { "max-length": "60", "z-index": "2" }, this.barTitle)))) : null, this.windowSize === "mobile" ? ( //mobile view
     Object.assign({}, (!!this.description || !!this.linkUrl ? (h("ptc-readmore", { "visible-lines-custom": this.customMaxLines, "z-index": "z-3", "more-text": this.moreText }, h("div", { style: { display: "inline" } }, !!this.description
-      ? `${this.description + " "}`
+      ? `${this.description +
+        " "}`
       : null, !!this.linkText ? (h("a", { class: "cta-link mf-listen", href: this.linkUrl, title: (_a = this.linkTitle) !== null && _a !== void 0 ? _a : this.linkText, target: this.target, tabIndex: 0, id: "announcement-bar-cta" }, this.linkText)) : null))) : null))) : (
     //desktop view
     h("div", { class: "description" }, !!this.description ? (

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

@@ -88,14 +88,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);
@@ -104,38 +107,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 {
@@ -144,24 +156,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 {
@@ -169,14 +187,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;
@@ -184,14 +205,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);
@@ -211,10 +235,6 @@ ptc-modal inline-form a,
   outline: 5px solid var(--keyboard-nav-outline);
 }
 
-.white-links a {
-  color: var(--color-white) !important;
-}
-
 .ptc-link {
   color: var(--color-gray-10);
   text-decoration: underline;

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

@@ -6,7 +6,6 @@ export class PtcBreadcrumb {
     this.color = "white";
     this.isDarkMode = false;
     this.styles = undefined;
-    this.type = undefined;
   }
   componentWillLoad() {
     this.listItems = this.hostElement.querySelectorAll("list-item");
@@ -20,19 +19,10 @@ export class PtcBreadcrumb {
   }
   render() {
     const classMap = this.getCssClassMap();
-    //const childListItems: any = this.listItems[0].getAttribute("list-type") === "home" && this.listItems[0].getAttribute("link-href") !== "" ? Array.from(this.listItems).slice(1) : this.listItems;
-    const childListItems = Array.from(this.listItems).filter((item) => item.getAttribute("list-type") === "home" && this.listItems[0].getAttribute("link-href") !== "");
-    const hasChildListItems = childListItems.length > 0;
-    // Remove childListItems from listItems if any exist
-    const filteredArray = hasChildListItems ? Array.from(this.listItems).filter((item) => !childListItems.includes(item)) : Array.from(this.listItems);
-    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("nav", { "aria-label": "Breadcrumb" }, h("ol", { class: "ptc-breadcrumb-ol" }, h("li", { class: "home-link mf-listen", id: "homeLinkID" }, hasChildListItems ? (h("a", { href: childListItems[0].getAttribute("link-href"), "aria-label": "Home Link", class: {
+    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("nav", { "aria-label": "Breadcrumb" }, h("ol", { class: "ptc-breadcrumb-ol" }, h("li", { class: "home-link mf-listen", id: "homeLinkID" }, h("a", { href: "/", "aria-label": "Home Link", class: {
         ["breadcrumb-item-link"]: true,
         ["dark-mode-link"]: this.isDarkMode,
-      } }, h("icon-asset", { type: "ptc", size: "medium", name: "icon-home", color: this.color })))
-      : (h("a", { href: "/", "aria-label": "Home Link", class: {
-          ["breadcrumb-item-link"]: true,
-          ["dark-mode-link"]: this.isDarkMode,
-        } }, h("icon-asset", { type: "ptc", size: "medium", name: "icon-home", color: this.color })))), filteredArray.map((item, index, array) => {
+      } }, h("icon-asset", { type: "ptc", size: "medium", name: "icon-home", color: this.color }))), Array.from(this.listItems).map((item, index, array) => {
       const textContent = item.textContent.trim();
       const href = item.getAttribute("link-href");
       return (h("li", { key: index, class: "mf-listen", id: `breadcrumb` + index + `ID` }, index < array.length - 1 ? (h("a", { href: href, target: "_self", class: {
@@ -149,23 +139,6 @@ export class PtcBreadcrumb {
         },
         "attribute": "styles",
         "reflect": false
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "type",
-        "reflect": false
       }
     };
   }

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

@@ -312,51 +312,6 @@ a.center {
   background-color: var(--color-gray-12);
 }
 
-.nav-store-btn {
-  font-family: var(--ptc-font-latin);
-  background-color: var(--color-green-07);
-  border-radius: var(--ptc-border-radius-standard);
-  border: 1px solid var(--color-green-07);
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  box-sizing: border-box;
-  color: var(--color-white);
-  display: inline-block;
-  font-size: var(--ptc-font-size-xx-small);
-  font-stretch: 100%;
-  font-weight: var(--ptc-font-weight-bold);
-  line-height: var(--ptc-line-height-loose);
-  list-style: none;
-  padding: 3px var(--ptc-element-spacing-04);
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  -moz-osx-font-smoothing: grayscale;
-  /*(For Firefox)*/
-  -webkit-font-smoothing: antialiased;
-  /*(For Chrome and Safari)*/
-  transition: background-color var(--ptc-transition-medium) var(--ptc-ease-inout);
-}
-.nav-store-btn:focus-visible {
-  border-radius: 4px !important;
-  border: 2px solid #fff !important;
-  outline: 5px solid #003dd6 !important;
-  background-color: var(--color-green-07) !important;
-  outline-offset: 0px !important;
-}
-.nav-store-btn:focus {
-  text-decoration: none;
-  border: solid 2px transparent;
-  outline: none;
-}
-.nav-store-btn:hover {
-  background-color: var(--color-green-08);
-}
-.nav-store-btn:active {
-  background-color: var(--color-green-09);
-  transition: none;
-}
-
 .ptc-primary,
 .ptc-quaternary,
 .ptc-secondary,
@@ -662,7 +617,6 @@ a.center {
   display: flex;
   justify-content: center;
   align-items: center;
-  text-align: center;
 }
 .secondary-cta-light .cta-content-wrap icon-asset, .secondary-cta-dark .cta-content-wrap icon-asset, .primary-cta .cta-content-wrap icon-asset {
   margin-right: 8px;
@@ -675,7 +629,6 @@ a.center {
 .primary-cta {
   background-color: var(--color-green-07);
   border-color: var(--color-green-07);
-  transition: all 0.2s ease;
 }
 .primary-cta:hover {
   background-color: var(--color-green-08);

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

@@ -410,23 +410,9 @@ ptc-footer {
 
 :host(.card-on-demand-video) .ptc-card-content-wrapper::before {
   background: rgba(0, 0, 0, 0.16);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  box-sizing: border-box;
 }
 :host(.card-on-demand-video) .ptc-card-content-wrapper::after {
-  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="46" height="48" viewBox="0 0 46 48" fill="none"><g filter="url(%23filter0_d_2245_7)"><path d="M38 20L8 36V4L38 20Z" fill="white"/></g><defs><filter id="filter0_d_2245_7" x="0" y="0" width="46" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="4"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2245_7"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2245_7" result="shape"/></filter></defs></svg>');
   opacity: 1;
-  left: 0;
-  right: 0;
-  top: 8px;
-  bottom: 0;
-  transform: translate(0%) scale(1);
-  width: 100%;
-  height: 100%;
-  transform: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   transition: opacity var(--ptc-transition-medium) var(--ptc-ease-inout), transform var(--ptc-transition-medium) var(--ptc-ease-inout);
 }
 
@@ -434,15 +420,10 @@ ptc-footer {
   background: transparent;
 }
 :host(.card-on-demand-video.mouse-hover) .ptc-card-content-wrapper::after {
-  transform: translate(0%) scale(1.07);
+  transform: translate(-50%, -50%) scale(1.07);
   transition: opacity var(--ptc-transition-medium) var(--ptc-ease-inout), transform var(--ptc-transition-medium) var(--ptc-ease-inout);
 }
 
 :host(.card-on-demand-video:active) .ptc-card-content-wrapper::before {
   background: rgba(0, 0, 0, 0.12);
-}
-
-:host(.card-on-demand-video.dark) .ptc-card-content-wrapper::before {
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  box-sizing: border-box;
 }

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

@@ -5,13 +5,11 @@ export class PtcCardContent {
     this.outlineColor = undefined;
     this.styles = undefined;
     this.isLoading = false;
-    this.cardOnDemandVideoTheme = "light";
   }
   hoverEventHandler() {
     if (!this.el.classList.contains("speed-bump") &&
       !this.el.classList.contains("card-video-intro") &&
       !this.el.classList.contains("card-dynamic") &&
-      !this.el.classList.contains("card-on-demand-video") &&
       !this.el.classList.contains("extra-tall")) {
       this.hoverEvent.emit();
       this.el.classList.add("mouse-hover");
@@ -31,7 +29,6 @@ export class PtcCardContent {
     if (!this.el.classList.contains("speed-bump") &&
       !this.el.classList.contains("card-video-intro") &&
       !this.el.classList.contains("card-dynamic") &&
-      !this.el.classList.contains("card-on-demand-video") &&
       !this.el.classList.contains("extra-tall")) {
       this.hoverEvent.emit();
       this.el.classList.remove("mouse-hover");
@@ -70,9 +67,6 @@ export class PtcCardContent {
     return {
       [this.cardType]: !!this.cardType ? true : false,
       [this.outlineColor]: !!this.outlineColor ? true : false,
-      [this.cardOnDemandVideoTheme]: !!this.cardOnDemandVideoTheme
-        ? true
-        : false,
     };
   }
   static get is() { return "ptc-card-content"; }
@@ -157,24 +151,6 @@ export class PtcCardContent {
         "attribute": "is-loading",
         "reflect": false,
         "defaultValue": "false"
-      },
-      "cardOnDemandVideoTheme": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"light\" | \"dark\"",
-          "resolved": "\"dark\" | \"light\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "card-on-demand-video-theme",
-        "reflect": false,
-        "defaultValue": "\"light\""
       }
     };
   }

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

@@ -26,14 +26,6 @@ export class PtcCardPlm {
       const cardOverlay = this.el.querySelector("ptc-overlay");
       cardOverlay.setOverlay("black-5");
     }
-    // Only toggle mouse-hover on nested ptc-card-content for on-demand video cards
-    const cardContent = this.el.querySelector("ptc-card-content");
-    if (cardContent) {
-      const contentClasses = cardContent.classList;
-      if (contentClasses.contains("card-on-demand-video")) {
-        contentClasses.add("mouse-hover");
-      }
-    }
   }
   leaveEventHandler() {
     if (this.el.classList.contains("extra-tall")) {
@@ -45,14 +37,6 @@ export class PtcCardPlm {
       const cardOverlay = this.el.querySelector("ptc-overlay");
       cardOverlay.setOverlay("black-4");
     }
-    // Remove hover state only for on-demand video card content
-    const cardContent = this.el.querySelector("ptc-card-content");
-    if (cardContent) {
-      const contentClasses = cardContent.classList;
-      if (contentClasses.contains("card-on-demand-video")) {
-        contentClasses.remove("mouse-hover");
-      }
-    }
   }
   componentDidLoad() {
     this.checkScreenSize();
@@ -65,7 +49,9 @@ export class PtcCardPlm {
       ? { onMouseEnter: this.hoverEventHandler.bind(this) }
       : {}), (!this.isLoading
       ? { onMouseLeave: this.leaveEventHandler.bind(this) }
-      : {})), this.styles && h("style", null, this.styles), h("div", { class: "tracker-div mf-listen", id: this.trackerId }, h(Tag, Object.assign({ class: `mf-listen ${this.darkFocusState ? "focus-state-dark-background" : ""}` }, (!!this.cardLink && this.cardType !== "simple-card"
+      : {})), this.styles && h("style", null, this.styles), h("div", { class: "tracker-div mf-listen", id: this.trackerId }, h(Tag, Object.assign({ class: `mf-listen ${this.darkFocusState
+        ? "focus-state-dark-background"
+        : ""}` }, (!!this.cardLink && this.cardType !== "simple-card"
       ? { tabindex: "0" }
       : { tabindex: "-1" }), (!!this.cardLink && !this.isLoading
       ? { href: this.cardLink }