@ptcwebops/ptcw-design 6.4.13 → 6.4.14-beta

package/dist/ptcw-design/p-ff66587b.entry.js

@@ -0,0 +1 @@
+import{r as t,h as i,H as s,g as a}from"./p-ac75c7ad.js";import{i as e,o,j as n}from"./p-22cf00e7.js";const r=class{constructor(i){t(this,i),this.videoEle=void 0,this.showFirstFrame=t=>{t.preload="auto",t.removeAttribute("autoplay"),t.loop=!1;const i=()=>{try{t.currentTime=1}catch(t){}t.pause()};if(t.readyState>=2)i();else{const s=()=>{t.removeEventListener("loadeddata",s),i()};t.addEventListener("loadeddata",s,{once:!0}),t.load()}},this.cardType="media-card",this.cardHref=void 0,this.target="_self",this.rel=void 0,this.activeBackgroundImage=void 0,this.activeBackgroundImageAlt=void 0,this.hoverBackgroundImage=void 0,this.heading=void 0,this.headingTransform="none",this.category=void 0,this.ariaLabel=void 0,this.iconImage=void 0,this.iconImageAlt=void 0,this.trackerId=void 0,this.isHovered=!1,this.isTabNavigated=!0,this.reducedMotion=!1,this.paused=!1}async onHoverChange(t){const i=this.videoEle;i&&(this.reducedMotion?t?this.showFirstFrame(i):i.pause():t?(i.loop=!0,i.setAttribute("autoplay",""),i.play().catch((()=>{}))):i.pause())}getCardText(){if("media-card"===this.cardType)return[i("div",{class:"card-wrap"},i("div",{class:"car-content"},i("p",null,this.category," "),i("h3",null,this.heading)))]}setTabNavigatedState(){this.isTabNavigated="DYNAMIC-PRODUCT-DRIVERS"!==this.el.parentElement.tagName}syncPlaybackWithPreference(){const t=this.videoEl;t&&(this.reducedMotion?this.showFirstFrame(t):(t.preload="auto",t.loop=!0,this.isHovered&&!this.paused&&(t.setAttribute("autoplay",""),t.play().catch((()=>{})))))}componentWillLoad(){this.setTabNavigatedState(),this.reducedMotion=e(),this.ariaLabel=this.getLastStringAfterSlash(this.cardHref)}componentDidLoad(){this.offPRM=o((t=>{this.reducedMotion=t,setTimeout((()=>this.syncPlaybackWithPreference()),10)}))}disconnectedCallback(){var t;null===(t=this.offPRM)||void 0===t||t.call(this)}getLastStringAfterSlash(t){const i=t.split("/");return i[i.length-1]}render(){const t=this.cardHref?"a":"div",a=!(!this.hoverBackgroundImage||".mp4"!==n(this.hoverBackgroundImage)&&!this.hoverBackgroundImage.includes(".mp4")),e=this.getCssClassMap();return i(s,{class:e,onmouseenter:()=>this.isHovered=!0,onmouseleave:()=>this.isHovered=!1,style:"case-study-icon"!=this.cardType?this.isHovered&&this.hoverBackgroundImage?{backgroundImage:`url(${this.hoverBackgroundImage})`}:{backgroundImage:`url(${this.activeBackgroundImage})`}:{}},i("slot",{name:"seo-content"}),"case-study-icon"!=this.cardType?i("div",{id:this.trackerId,class:"tracker-div mf-listen"},i(t,Object.assign({class:"anchor-wrap",target:this.target,href:this.cardHref,rel:this.rel},this.isTabNavigated?{tabindex:0}:{tabindex:-1},{"aria-label":this.cardHref?"Read more about "+this.ariaLabel:void 0}),a&&i("video",{muted:!0,loop:!0,playsinline:!0,poster:this.activeBackgroundImage,ref:t=>this.videoEle=t,style:this.isHovered?{display:"block"}:{display:"none"},tabindex:"-1"},i("source",{src:this.hoverBackgroundImage,type:"video/mp4"},"Your browser does not support the video tag.")),"media-card"===this.cardType&&i("ptc-overlay",{"filter-color":"black-2"}),"media-card"===this.cardType&&this.getCardText())):null,"case-study-icon"===this.cardType?i("div",{id:this.trackerId,class:"tracker-div"},i("a",Object.assign({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:void 0},this.isTabNavigated?{tabindex:0}:{tabindex:-1}),i("img",{class:"case-study-bg-img",src:this.activeBackgroundImage,alt:this.activeBackgroundImageAlt}),i("div",{class:"after"}),i("img",{class:"case-study-icon-img",src:this.iconImage,alt:this.iconImageAlt}))):null)}getCssClassMap(){return{[this.cardType]:!0}}get el(){return a(this)}static get watchers(){return{isHovered:["onHoverChange"]}}};r.style="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;-webkit-hyphenate-limit-after:3;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;position:relative;width:100%;background-size:cover;background-position:50%;background-repeat:no-repeat}:host .anchor-wrap{height:100%;width:100%;display:block;text-decoration:none;position:relative}:host .anchor-wrap:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host video{-o-object-fit:cover;object-fit:cover;height:100%;width:100%;z-index:0;position:absolute;left:0;right:0;top:0;bottom:0;display:none}:host(.media-card) ::slotted([slot=seo-content]){display:none}:host(.media-card) .card-wrap{display:flex;height:100%;width:100%;position:relative;z-index:1;min-height:329px;align-items:end}:host(.media-card) .card-wrap .car-content{padding:20px 30px 30px 30px}:host(.media-card) .card-wrap .car-content p,:host(.media-card) .card-wrap .car-content h3{color:#fff}:host(.media-card) .card-wrap .car-content h3{position:relative;margin-bottom:0;font-size:var(--ptc-font-size-medium);text-shadow:1px 3px 30px #000;line-height:var(--ptc-line-height-densest);display:inline}@media only screen and (min-width: 768px){:host(.media-card) .card-wrap .car-content h3{font-size:var(--ptc-font-size-large)}}:host(.media-card) .card-wrap .car-content h3::before{content:\"\";width:100%;height:3px;background-image:url(\"data:image/svg+xml,%3Csvg width='60' height='1' viewBox='0 0 60 1' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='30' height='1' fill='%2333A13C'/%3E%3C/svg%3E\");background-repeat:repeat;position:absolute;background-size:initial;top:-10px}:host(.media-card) .card-wrap .car-content p{text-shadow:1px 3px 30px var(--color-black);font-weight:var(--ptc-font-weight-semibold);display:block;font-size:var(--ptc-font-size-x-small)}:host(.bureau-card){height:100%;position:relative}:host(.case-study-icon){width:296px}: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;height:396px;display:flex;justify-content:center;align-items:center;transition:var(--ptc-transition-medium) var(--ptc-ease-inout);-webkit-transition:var(--ptc-transition-medium) var(--ptc-ease-inout);-o-transition:var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.case-study-icon) .case-study-img-anchor .case-study-bg-img{display:flex;width:296px;height:396px;flex-direction:column;justify-content:center;align-items:center;border-radius:4px;-o-object-fit:cover;object-fit:cover;position:absolute;z-index:1;box-shadow:var(--ptc-shadow-large)}:host(.case-study-icon) .case-study-img-anchor .after{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;z-index:2;background:rgba(0, 0, 0, 0.5);transition:var(--ptc-transition-medium) var(--ptc-ease-inout);-webkit-transition:var(--ptc-transition-medium) var(--ptc-ease-inout);-o-transition:var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.case-study-icon) .case-study-img-anchor .case-study-icon-img{position:absolute;z-index:3;width:92px;height:42px;border-radius:4px;background:#fff;padding:24px;box-shadow:0px 1px 4px 0px rgba(0, 0, 0, 0.24);transition:var(--ptc-transition-medium) var(--ptc-ease-inout);-webkit-transition:var(--ptc-transition-medium) var(--ptc-ease-inout);-o-transition:var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.case-study-icon) .case-study-img-anchor:hover .after{display:block;background:rgba(0, 0, 0, 0.07)}:host(.case-study-icon) .case-study-img-anchor:hover .case-study-icon-img{width:96px;height:46px}:host(.case-study-icon) .case-study-img-anchor:active,:host(.case-study-icon) .case-study-img-anchor:focus{transition:none !important;-webkit-transition:none !important;-o-transition:none !important}:host(.case-study-icon) .case-study-img-anchor:active .after,:host(.case-study-icon) .case-study-img-anchor:focus .after{display:block;background:rgba(0, 0, 0, 0.2);transition:none !important;-webkit-transition:none !important;-o-transition:none !important}:host(.case-study-icon) .case-study-img-anchor:active .case-study-icon-img,:host(.case-study-icon) .case-study-img-anchor:focus .case-study-icon-img{transition:none !important;-webkit-transition:none !important;-o-transition:none !important}:host(.case-study-icon) .case-study-img-anchor:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}@media (min-width: 768px){:host(.case-study-icon){width:373px}:host(.case-study-icon) .case-study-img-anchor{width:373px;height:500px}:host(.case-study-icon) .case-study-img-anchor .case-study-bg-img{width:373px;height:500px}}";export{r as ptc_media_card}