@ptcwebops/ptcw-design 5.0.7 → 5.0.9

package/dist/collection/components/organism-bundles/homepage-jumbotron/homepage-jumbotron.js

@@ -6,7 +6,7 @@ export class HomepageJumbotron {
   constructor() {
     this.tileCount = 0;
     this.bgVideoSrc = '';
-    this.bgSrc = 'https://images.unsplash.com/photo-1675285972028-45dc2add07be?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Nzc3ODk2NTE&ixlib=rb-4.0.3&q=80';
+    this.bgSrc = '';
     this.jumbotron = 'dark';
     this.isIframe = false;
     this.playBtnText = 'play';
@@ -153,7 +153,7 @@ export class HomepageJumbotron {
         },
         "attribute": "bg-src",
         "reflect": false,
-        "defaultValue": "'https://images.unsplash.com/photo-1675285972028-45dc2add07be?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Nzc3ODk2NTE&ixlib=rb-4.0.3&q=80'"
+        "defaultValue": "''"
       },
       "jumbotron": {
         "type": "string",

package/dist/collection/components/ptc-background-video/ptc-background-video.js

@@ -41,7 +41,7 @@ export class PtcBackgroundVideo {
   }
   render() {
     const videoContent = this.isIframe ? (h("div", { class: "iframe-wrapper" }, h("iframe", { id: "jumbotron-iframe", src: this.videoSrc, frameborder: 0, allow: "autoplay", allowFullScreen: true, class: "background-video-embed" }))) : (h("video", { src: this.videoSrc, poster: this.posterSrc, autoplay: true, loop: true, muted: true, playsinline: true }));
-    return (h(Host, { class: this.type }, videoContent, !!this.videoSrc && this.playButtonTitle && (h("div", Object.assign({ class: `play-button ${this.buttonLocation}` }, (this.buttonTabIndex ? { tabindex: 0 } : { tabindex: -1 })), this.paused && (h("ptc-tooltip", { class: "play-btn", mode: "wrapper", description: this.playButtonTitle, position: this.buttonLocation === "allbp-bottom-right" ? "side-left" : 'bottom-right', styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important; white-space: nowrap}" }, h("ptc-button", { type: "button", color: "icon-toggle", onClick: e => this.toggleVideoPlay(e), styles: "button.icon-toggle { padding :0px 8px; }", "aria-label": "Video Play button" }, h("icon-asset", { name: "play", size: "small", type: "ptc", color: "black" })))), !this.paused && !!this.pauseButtonTitle && (h("ptc-tooltip", { class: "pause-btn", mode: "wrapper", description: this.pauseButtonTitle, position: this.buttonLocation === "allbp-bottom-right" ? "side-left" : 'bottom-right', styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important; white-space: nowrap}" }, h("ptc-button", { type: "button", color: "icon-toggle", onClick: e => this.toggleVideoPlay(e), "aria-label": "Video Pause button" }, h("icon-asset", { name: "pause", size: "small", type: "ptc", color: "black" })))))), this.overlay ? h("div", { class: `video-overlay ${this.overlayType}` }) : '', this.type == 'default' ? h("slot", null) : ''));
+    return (h(Host, { class: this.type }, videoContent, !!this.videoSrc && this.playButtonTitle && (h("div", { class: `play-button ${this.buttonLocation}` }, this.paused && (h("ptc-tooltip", { class: "play-btn", mode: "wrapper", description: this.playButtonTitle, position: this.buttonLocation === "allbp-bottom-right" ? "side-left" : 'bottom-right', styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important; white-space: nowrap}" }, h("ptc-button", { type: "button", color: "icon-toggle", tabNav: 0, onClick: e => this.toggleVideoPlay(e), styles: "button.icon-toggle { padding :0px 8px; }", "aria-label": "Video Play button" }, h("icon-asset", { name: "play", size: "small", type: "ptc", color: "black" })))), !this.paused && !!this.pauseButtonTitle && (h("ptc-tooltip", { class: "pause-btn", mode: "wrapper", description: this.pauseButtonTitle, position: this.buttonLocation === "allbp-bottom-right" ? "side-left" : 'bottom-right', styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important; white-space: nowrap}" }, h("ptc-button", { type: "button", color: "icon-toggle", onClick: e => this.toggleVideoPlay(e), "aria-label": "Video Pause button" }, h("icon-asset", { name: "pause", size: "small", type: "ptc", color: "black" })))))), this.overlay ? h("div", { class: `video-overlay ${this.overlayType}` }) : '', this.type == 'default' ? h("slot", null) : ''));
   }
   toggleVideoPlay(e) {
     e.preventDefault();

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

@@ -459,6 +459,10 @@ a.center {
 .ptc-tertiary ::slotted([slot=slot-after-text]) {
   fill: var(--color-gray-10) !important;
 }
+.ptc-tertiary ::slotted(a) {
+  color: var(--color-gray-10) !important;
+  text-decoration-line: none !important;
+}
 
 .ptc-quaternary {
   background: var(--color-green-07);

package/dist/collection/components/ptc-homepage-video-background/ptc-homepage-video-background.css

@@ -282,7 +282,11 @@ ptc-link, ptc-square-card,
 }
 .card-links .card-section .card-link .bgb {
   background: linear-gradient(85deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.07) 100.13%);
+  backdrop-filter: saturate(180%) blur(20px);
+  transition-property: background, backdrop-filter;
+  transition: background 0.24s cubic-bezier(0.28, 0.11, 0.32, 1);
   opacity: 1;
+  box-sizing: border-box;
 }
 .card-links .card-section .card-link .bgh {
   background: linear-gradient(85deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.17) 100.13%);

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

@@ -58,6 +58,9 @@ ptc-link, ptc-square-card,
   display: block;
   height: 100%;
 }
+:host .tracker-div {
+  display: inline;
+}
 @supports (hyphenate-limit-chars: 10 3 3) {
   :host {
     hyphenate-limit-chars: 10 4 4;

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

@@ -3,9 +3,10 @@ export class PtcIconCard {
   constructor() {
     this.cardHref = undefined;
     this.target = undefined;
+    this.trackerId = undefined;
   }
   render() {
-    return (h(Host, null, h("a", { href: this.cardHref, target: this.target }, h("div", null, h("span", { class: 'card-icon' }, h("slot", null)), h("div", { class: 'card-title' }, h("slot", { name: 'card-title' }))))));
+    return (h(Host, null, h("div", { id: this.trackerId, class: "tracker-div" }, h("a", { href: this.cardHref, target: this.target }, h("div", null, h("span", { class: 'card-icon' }, h("slot", null)), h("div", { class: 'card-title' }, h("slot", { name: 'card-title' })))))));
   }
   static get is() { return "ptc-icon-card"; }
   static get encapsulation() { return "shadow"; }
@@ -54,6 +55,23 @@ export class PtcIconCard {
         },
         "attribute": "target",
         "reflect": false
+      },
+      "trackerId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tracker-id",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/ptc-info-tile/ptc-info-tile.css

@@ -130,10 +130,13 @@ ptc-link, ptc-square-card,
 .tile.text:hover {
   border: 1px solid var(--color-gray-07);
 }
-.tile.text:focus, .tile.text:active {
+.tile.text:active {
   background-color: var(--color-gray-01);
   border: 1px solid var(--color-gray-07);
 }
+.tile.text:focus-visible {
+  outline-offset: -5px;
+}
 @media only screen and (min-width: 992px) {
   .tile.text {
     width: auto;

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

@@ -57,7 +57,7 @@ export class PtcJumbotron {
         break;
       case 'dark-video':
       case 'light-video':
-        mediaElement = (h("ptc-background-video", { class: "video-ratio", overlay: false, "video-src": this.bgVideoSrc, isIframe: this.isIframe, "play-button-title": this.playButtonTitle, "pause-button-title": this.pauseButtonTitle, "button-location": this.buttonLocation, "button-tab-index": this.buttonTabIndex }, ' ', this.hasPopupVideo && this.isMobile ? (h("div", { class: "mobile-modal-play-btn" }, ' ', h("slot", { name: "video" }))) : null));
+        mediaElement = (h("ptc-background-video", { class: "video-ratio", overlay: false, "video-src": this.bgVideoSrc, isIframe: this.isIframe, "play-button-title": this.playButtonTitle, "pause-button-title": this.pauseButtonTitle, "button-location": this.buttonLocation, "button-tab-index": "true" }, ' ', this.hasPopupVideo && this.isMobile ? (h("div", { class: "mobile-modal-play-btn" }, ' ', h("slot", { name: "video" }))) : null));
         break;
       case 'dark':
       case 'light':

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

@@ -142,6 +142,9 @@ ptc-link, ptc-square-card,
 :host(.case-study-icon) ::slotted([slot=seo-content]) {
   display: none;
 }
+:host(.case-study-icon) .tracker-div {
+  display: inline;
+}
 :host(.case-study-icon) .case-study-img-anchor {
   position: relative;
   width: 296px;

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

@@ -17,6 +17,7 @@ export class PtcMediaCard {
     this.category = undefined;
     this.ariaLabel = undefined;
     this.iconImage = undefined;
+    this.trackerId = undefined;
     this.isHovered = false;
   }
   WatchStateHandler(newValue) {
@@ -49,7 +50,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("a", { class: "case-study-img-anchor", 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 }), h("div", { class: "after" }), h("img", { class: "case-study-icon-img", src: this.iconImage })))
+      (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", 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 }), h("div", { class: "after" }), h("img", { class: "case-study-icon-img", src: this.iconImage }))))
       : null));
   }
   getCssClassMap() {
@@ -262,6 +263,23 @@ export class PtcMediaCard {
         },
         "attribute": "icon-image",
         "reflect": false
+      },
+      "trackerId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Tracker Id"
+        },
+        "attribute": "tracker-id",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/ptc-social-icons-footer/ptc-social-icons-footer.js

@@ -42,7 +42,7 @@ export class PtcSocialIconsFooter {
     modal.show = true;
   }
   render() {
-    return (h(Host, null, h("slot", null), h("ul", null, this.instagramUrl && h("li", null, " ", h("a", { href: this.instagramUrl, title: 'Instagram', innerHTML: this.instagramImageUrl == "" ? instagramSVG : "", target: this.target }, this.instagramImageUrl != "" && h("img", { src: this.instagramImageUrl, alt: this.instagramImageAlt })), " "), this.facebookUrl && h("li", null, " ", h("a", { href: this.facebookUrl, title: 'Facebook', innerHTML: this.facebookImageUrl == "" ? facebookSVG : "", target: this.target }, this.facebookImageUrl != "" && h("img", { src: this.facebookImageUrl, alt: this.facebookImageAlt })), " "), this.linkedinUrl && h("li", null, " ", h("a", { href: this.linkedinUrl, title: 'LinkedIn', innerHTML: this.linkedinImageUrl == "" ? linkedinSVG : "", target: this.target }, this.linkedinImageUrl != "" && h("img", { src: this.linkedinImageUrl, alt: this.linkedinImageAlt })), " "), this.xUrl && h("li", null, " ", h("a", { href: this.xUrl, title: 'X', innerHTML: this.xImageUrl == "" ? xSVG : "", target: this.target }, this.xImageUrl != "" && h("img", { src: this.xImageUrl, alt: this.xImageAlt })), " "), this.youtubeUrl && h("li", null, " ", h("a", { href: this.youtubeUrl, title: 'Youtube', innerHTML: this.youtubeImageUrl == "" ? youtubeSVG : "", target: this.target }, this.youtubeImageUrl != "" && h("img", { src: this.youtubeImageUrl, alt: this.youtubeImageAlt })), " "), this.weiboUrl && h("li", null, " ", h("a", { href: this.weiboUrl, title: 'Weibo', innerHTML: this.weiboImageUrl == "" ? weiboSVG : "", target: this.target }, this.weiboImageUrl != "" && h("img", { src: this.weiboImageUrl, alt: this.wechatQrImageAltText })), " "), this.youkuUrl && h("li", null, " ", h("a", { href: this.youkuUrl, title: 'Youku', innerHTML: this.youkuImageUrl == "" ? ykSVG : "", target: this.target }, this.youkuImageUrl != "" && h("img", { src: this.youkuImageUrl, alt: this.youkuImageAlt })), " "), this.wechatQrImageUrl && h("li", null, " ", h("a", { href: "#", onClick: (Event) => { this.openModal(Event); }, title: this.wechatImageAlt != "" ? this.wechatImageAlt : "WeChat", innerHTML: this.wechatImageUrl == "" ? wechatSVG : "" }, this.wechatImageUrl != "" && h("img", { src: this.wechatImageUrl, alt: this.wechatImageAlt })), " ")), h("ptc-modal", { id: "QRModal", show: false, size: "sm", "close-on-blur": true, fixed: true, styles: '.wrapper .modal-popup .modal-body { padding-bottom: 40px}' }, h("ptc-picture", { alt: this.wechatQrImageAltText, src: this.wechatQrImageUrl, "max-width": '250', "image-alignment": 'center', styles: 'img{margin:auto}' }))));
+    return (h(Host, null, h("slot", null), h("ul", null, this.instagramUrl && h("li", { id: "footerInstagramIconID" }, " ", h("a", { href: this.instagramUrl, title: 'Instagram', innerHTML: this.instagramImageUrl == "" ? instagramSVG : "", target: this.target }, this.instagramImageUrl != "" && h("img", { src: this.instagramImageUrl, alt: this.instagramImageAlt })), " "), this.facebookUrl && h("li", { id: "footerFacebookIconID" }, " ", h("a", { href: this.facebookUrl, title: 'Facebook', innerHTML: this.facebookImageUrl == "" ? facebookSVG : "", target: this.target }, this.facebookImageUrl != "" && h("img", { src: this.facebookImageUrl, alt: this.facebookImageAlt })), " "), this.linkedinUrl && h("li", { id: "footerLinkedInIconID" }, " ", h("a", { href: this.linkedinUrl, title: 'LinkedIn', innerHTML: this.linkedinImageUrl == "" ? linkedinSVG : "", target: this.target }, this.linkedinImageUrl != "" && h("img", { src: this.linkedinImageUrl, alt: this.linkedinImageAlt })), " "), this.xUrl && h("li", { id: "footerXIconID" }, " ", h("a", { href: this.xUrl, title: 'X', innerHTML: this.xImageUrl == "" ? xSVG : "", target: this.target }, this.xImageUrl != "" && h("img", { src: this.xImageUrl, alt: this.xImageAlt })), " "), this.youtubeUrl && h("li", { id: "footerYouTubeIconID" }, " ", h("a", { href: this.youtubeUrl, title: 'Youtube', innerHTML: this.youtubeImageUrl == "" ? youtubeSVG : "", target: this.target }, this.youtubeImageUrl != "" && h("img", { src: this.youtubeImageUrl, alt: this.youtubeImageAlt })), " "), this.weiboUrl && h("li", { id: "footerWeiboIconID" }, " ", h("a", { href: this.weiboUrl, title: 'Weibo', innerHTML: this.weiboImageUrl == "" ? weiboSVG : "", target: this.target }, this.weiboImageUrl != "" && h("img", { src: this.weiboImageUrl, alt: this.wechatQrImageAltText })), " "), this.youkuUrl && h("li", { id: "footerYouKuIconID" }, " ", h("a", { href: this.youkuUrl, title: 'Youku', innerHTML: this.youkuImageUrl == "" ? ykSVG : "", target: this.target }, this.youkuImageUrl != "" && h("img", { src: this.youkuImageUrl, alt: this.youkuImageAlt })), " "), this.wechatQrImageUrl && h("li", { id: "footerWeChatIconID" }, " ", h("a", { href: "#", onClick: (Event) => { this.openModal(Event); }, title: this.wechatImageAlt != "" ? this.wechatImageAlt : "WeChat", innerHTML: this.wechatImageUrl == "" ? wechatSVG : "" }, this.wechatImageUrl != "" && h("img", { src: this.wechatImageUrl, alt: this.wechatImageAlt })), " ")), h("ptc-modal", { id: "QRModal", show: false, size: "sm", "close-on-blur": true, fixed: true, styles: '.wrapper .modal-popup .modal-body { padding-bottom: 40px}' }, h("ptc-picture", { alt: this.wechatQrImageAltText, src: this.wechatQrImageUrl, "max-width": '250', "image-alignment": 'center', styles: 'img{margin:auto}' }))));
   }
   static get is() { return "ptc-social-icons-footer"; }
   static get encapsulation() { return "shadow"; }