@ptcwebops/ptcw-design 1.4.6 → 1.4.8

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

@@ -10,6 +10,7 @@ export class PtcImg {
     this.imageType = 'smart-bg';
     this.borderRadius = '';
     this.loadMode = 'lazy-bg';
+    this.styles = undefined;
   }
   /**
    * Image Z Index
@@ -20,7 +21,7 @@ export class PtcImg {
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, null, h("div", { class: classMap, "data-xs": `${this.imgUrl}:${this.sizeXs}`, "data-sm": `${this.imgUrl}:${this.sizeSm}`, "data-md": `${this.imgUrl}:${this.sizeMd}`, "data-lg": `${this.imgUrl}:${this.sizeLg}` }, this.imageType == 'smart-bg' ? h("slot", null) : null)));
+    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: classMap, "data-xs": `${this.imgUrl}:${this.sizeXs}`, "data-sm": `${this.imgUrl}:${this.sizeSm}`, "data-md": `${this.imgUrl}:${this.sizeMd}`, "data-lg": `${this.imgUrl}:${this.sizeLg}` }, this.imageType == 'smart-bg' ? h("slot", null) : null)));
   }
   componentDidLoad() {
     this.addIntersectionObserver();
@@ -246,8 +247,8 @@ export class PtcImg {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'radius-standard' | 'radius-large' | ''",
-          "resolved": "\"\" | \"radius-large\" | \"radius-standard\"",
+          "original": "'radius-standard' | 'radius-large' | 'radius-large-top' | 'radius-standard-top' | ''",
+          "resolved": "\"\" | \"radius-large\" | \"radius-large-top\" | \"radius-standard\" | \"radius-standard-top\"",
           "references": {}
         },
         "required": false,
@@ -277,6 +278,23 @@ export class PtcImg {
         "attribute": "load-mode",
         "reflect": false,
         "defaultValue": "'lazy-bg'"
+      },
+      "styles": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "(optional) Injected CSS styles"
+        },
+        "attribute": "styles",
+        "reflect": false
       }
     };
   }

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

@@ -734,6 +734,30 @@
   flex-wrap: wrap;
 }
 
+.u-align-self-start {
+  align-self: start;
+}
+
+.u-align-self-center {
+  align-self: center;
+}
+
+.u-align-self-stretch {
+  align-self: stretch;
+}
+
+.u-justify-self-start {
+  justify-self: start;
+}
+
+.u-justify-self-center {
+  justify-self: center;
+}
+
+.u-justify-self-stretch {
+  justify-self: stretch;
+}
+
 .embed-responsive {
   position: relative;
   display: block;
@@ -912,6 +936,7 @@ ptc-nav-submenu.short-dropdown .dropdown-content.open {
   grid-column-gap: 0px;
   grid-row-gap: 0px;
   position: unset;
+  z-index: 999;
 }
 
 .div1 {
@@ -936,6 +961,15 @@ ptc-nav-submenu.short-dropdown .dropdown-content.open {
 .gif-bg {
   background-color: #F3F3F3;
 }
+.gif-bg img {
+  width: 100%;
+  height: auto;
+}
+@media only screen and (min-width: 768px) {
+  .gif-bg img {
+    width: auto;
+  }
+}
 
 .video-ratio {
   position: relative;
@@ -943,9 +977,14 @@ ptc-nav-submenu.short-dropdown .dropdown-content.open {
   height: 0;
   padding-bottom: 100%;
 }
+@media screen and (min-width: 550px) {
+  .video-ratio {
+    padding-bottom: 56.25%;
+  }
+}
 @media only screen and (min-width: 768px) {
   .video-ratio {
-    padding-bottom: 75%;
+    padding-bottom: 56.25%;
   }
 }
 @media only screen and (min-width: 992px) {
@@ -989,7 +1028,7 @@ ptc-nav-submenu.short-dropdown .dropdown-content.open {
 }
 
 .gap-adjustment {
-  gap: var(--ptc-element-spacing-05);
+  gap: var(--ptc-element-spacing-07);
   margin-bottom: var(--ptc-element-spacing-07);
 }
 
@@ -1040,13 +1079,28 @@ ptc-nav-submenu.short-dropdown .dropdown-content.open {
 ptc-svg-btn {
   position: absolute;
   left: 50%;
-  bottom: 150%;
-  transform: translate(-50%, 50%);
+  top: 0%;
+  transform: translate(-50%, -200%);
+}
+@media only screen and (min-width: 480px) {
+  ptc-svg-btn {
+    transform: translate(-50%, -260%);
+  }
+}
+@media screen and (min-width: 550px) {
+  ptc-svg-btn {
+    transform: translate(-50%, -235%);
+  }
+}
+@media only screen and (min-width: 768px) {
+  ptc-svg-btn {
+    transform: translate(-50%, -306%);
+  }
 }
 @media only screen and (min-width: 992px) {
   ptc-svg-btn {
-    left: 70%;
-    bottom: 50%;
-    transform: translate(0%, 50%);
+    top: 50%;
+    left: 75%;
+    transform: translate(-50%, -50%);
   }
 }

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

@@ -17,6 +17,7 @@ export class PtcJumbotron {
   }
   handleResize() {
     this.getContentBackground();
+    this.adjustJumbotronHeight();
   }
   connectedCallback() {
     this.getContentBackground();
@@ -25,17 +26,20 @@ export class PtcJumbotron {
     if (!!this.popupVideo) {
       const selectedBtn = this.el.shadowRoot.querySelector('#j-modal-btn');
       const PtcModal = this.el.shadowRoot.querySelector('#j-modal');
-      console.log('selected btn: ' + selectedBtn + '; selected Modal: ' + PtcModal);
-      selectedBtn.addEventListener('click', () => {
-        PtcModal.show = true;
-      });
-    }
-    const contentContainerH = this.el.shadowRoot.querySelector(".content-container").clientHeight;
-    const videoEle = !!this.el.shadowRoot.querySelector(".video-ratio") ? this.el.shadowRoot.querySelector(".video-ratio") : null;
-    if (contentContainerH < 500 && videoEle) {
-      videoEle.style.paddingBottom = "500px";
+      if (selectedBtn && PtcModal) {
+        selectedBtn.addEventListener('click', function () {
+          PtcModal.show = true;
+        });
+        const iframe = PtcModal.shadowRoot.querySelector('iframe');
+        console.log('iframe');
+        console.log(iframe);
+        const iframeDoc = iframe.contentDocument;
+        //const shadowVideo = shadowIframe.querySelector('document')
+        console.log('video: ');
+        console.log(iframeDoc);
+      }
     }
-    //console.log('content-container: ' + this.el.shadowRoot.querySelector(".content-container").clientHeight);
+    this.adjustJumbotronHeight();
   }
   render() {
     console.log('render');
@@ -53,11 +57,11 @@ export class PtcJumbotron {
         mediaElement = h("ptc-background-video", { class: "video-ratio", overlay: false, "video-src": this.bgVideoSrc, isIframe: this.isIframe });
         break;
       default:
-        mediaElement = h("ptc-img", { "img-url": this.bgSrc });
+        mediaElement = h("ptc-img", { "img-url": this.bgSrc, styles: ".smart-bg{background-position:right !important;}" });
     }
-    return (h(Host, { class: classMap }, h("div", { class: "parent" }, h("div", { class: `div1 image-container ${this.jumbotronType === 'text' ? 'hidden' : ''}` }, mediaElement), h("div", { class: "div2 content-container" }, h("div", { class: "bg-overlay", style: { background: this.contentBackground } }), h("div", { class: "ptc-container content-layout" }, h("max-width-container", { "max-width": "578", breakpoint: 992, "content-align": this.jumbotronType === 'text' ? 'center' : this.textAlign }, h("slot", { name: "breadcrumb" }), h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-title", { type: "h1", upperline: "no-upperline", "title-size": "xxxx-large", "title-height": "densest", "title-weight": "w-8", "title-margin": "margin-flush", "text-align": this.jumbotronType === 'text' ? 'center' : 'left' }, h("ptc-tooltip", { "text-lines": "3", description: this.mainTitle, position: "right", styles: `.ellipsis-by-line-boxing{color: ${this.contentColor};}` })), h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-para", { "font-size": this.jumbotronType === 'text' && this.isMobile ? "x-small" : "small", "font-weight": this.jumbotronType === 'text' && this.isMobile ? 'w-7' : 'w-4', "para-margin": "margin-bottom-6", "para-color": "white", "para-line-h": "line-height-p", "para-align": this.jumbotronType === 'text' ? 'center' : 'left' }, h("ptc-tooltip", { "text-lines": "8", description: this.subTitle, position: "right", styles: `.ellipsis-by-line-boxing{color: ${this.contentColor};}` })), h("div", { class: `u-flex u-flex-wrap gap-adjustment${this.jumbotronType === 'text' ? ' text-adjustment' : ''}` }, h("slot", { name: "j-cta" }))), !!this.popupVideo
+    return (h(Host, { class: classMap }, h("div", { class: "parent" }, h("div", { class: `div1 image-container ${this.jumbotronType === 'text' ? 'hidden' : ''}` }, mediaElement), h("div", { class: "div2 content-container" }, h("div", { class: "bg-overlay", style: { background: this.contentBackground } }), h("div", { class: "ptc-container content-layout" }, h("max-width-container", { "max-width": "578", breakpoint: 992, "content-align": this.jumbotronType === 'text' ? 'center' : this.textAlign }, h("slot", { name: "breadcrumb" }), h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-title", { type: "h1", upperline: "no-upperline", "title-size": "xxxx-large", "title-height": "densest", "title-weight": "w-8", "title-margin": "margin-flush", "text-align": this.jumbotronType === 'text' ? 'center' : 'left' }, h("ptc-tooltip", { "text-lines": "3", description: this.mainTitle, position: "right", styles: `.ellipsis-by-line-boxing{color: ${this.contentColor};}` })), h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-para", { "font-size": this.jumbotronType === 'text' && this.isMobile ? 'x-small' : 'small', "font-weight": this.jumbotronType === 'text' && this.isMobile ? 'w-7' : 'w-4', "para-margin": "margin-bottom-6", "para-color": "white", "para-line-h": "line-height-p", "para-align": this.jumbotronType === 'text' ? 'center' : 'left' }, h("ptc-tooltip", { "text-lines": "8", description: this.subTitle, position: "right", styles: `.ellipsis-by-line-boxing{color: ${this.contentColor};}` })), h("div", { class: `u-flex u-flex-wrap gap-adjustment${this.jumbotronType === 'text' ? ' text-adjustment' : ''}` }, h("slot", { name: "j-cta" }))), !!this.popupVideo
       ? [
-        h("ptc-modal", { id: "j-modal", show: false, size: "lg", "iframe-url": this.popupVideo }),
+        h("ptc-modal", { id: "j-modal", show: false, size: "lg", "iframe-url": this.popupVideo, fixed: true }),
         h("ptc-svg-btn", { id: "j-modal-btn", "svg-name": "play", display: "block", "z-index": 2 }),
       ]
       : null, this.jumbotronType === 'png' ? (h("div", { class: "desktop-media-image" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc }))) : null, this.jumbotronType === 'gif' ? (h("div", { class: "desktop-media-image desk-gif-adjustment" }, h("img", { src: this.gifSrc }))) : null)))));
@@ -109,6 +113,16 @@ export class PtcJumbotron {
       this.isMobile = false;
     }
   }
+  adjustJumbotronHeight() {
+    const contentContainerH = this.el.shadowRoot.querySelector('.content-container').clientHeight;
+    const videoEle = !!this.el.shadowRoot.querySelector('.video-ratio') ? this.el.shadowRoot.querySelector('.video-ratio') : null;
+    if (contentContainerH < 500 && videoEle && !this.isMobile) {
+      videoEle.style.paddingBottom = '500px';
+    }
+    else {
+      !!videoEle ? videoEle.style.paddingBottom = '' : null;
+    }
+  }
   static get is() { return "ptc-jumbotron"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {

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

@@ -32,6 +32,28 @@
   color: var(--color-green-06);
 }
 
+.global {
+  font-style: var(--ptc-letter-spacing-normal);
+  font-weight: var(--ptc-font-weight-bold);
+  font-size: var(--ptc-font-size-x-small);
+  text-decoration-line: underline;
+  color: var(--color-blue-07);
+  transition: color var(--ptc-transition-medium) var(--ptc-ease-out);
+}
+.global:visited {
+  color: var(--color-blue-10);
+}
+.global:active, .global:visited:active {
+  color: var(--color-blue-09);
+}
+.global:hover, .global:visited:hover {
+  color: var(--color-blue-08);
+}
+.global.disabled {
+  color: var(--color-gray-04) !important;
+  cursor: not-allowed;
+}
+
 .product-link {
   font-weight: var(--ptc-font-weight-extrabold);
 }

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

@@ -13,21 +13,23 @@ export class PtcLink {
   }
   render() {
     const classMap = this.getCssClassMap();
+    debugger;
     return (h(Host, null, h("a", { class: classMap, href: this.href, target: this.external ? '_blank' : this.target, title: this.linkTitle }, h("slot", null))));
   }
   getCssClassMap() {
-    const classOptions = ['simple', 'underline', 'nav-title', 'primary-nav-link', 'nav-title-link', 'nav-card-link', 'secondary-nav-link', 'footer-nav-link', 'copyright-link', 'product-link', 'd-green-underline', 'd-white-underline'];
+    const classOptions = ['simple', 'underline', 'nav-title', 'primary-nav-link', 'nav-title-link', 'nav-card-link', 'secondary-nav-link', 'footer-nav-link', 'copyright-link', 'product-link', 'd-green-underline', 'd-white-underline', 'global'];
     let mainClass = this.theme;
     if (classOptions.indexOf(mainClass) < 0) {
       mainClass = 'simple'; // fallback to simple class if theme is unavailable
     }
+    debugger;
     return {
       ['ptc-link']: true,
       [mainClass]: true,
       ['disabled']: this.disabled,
       [this.fontSize]: true,
       [this.linkArea]: this.linkArea ? true : false,
-      [this.fontWeight]: true,
+      [this.fontWeight]: this.fontWeight ? true : false,
     };
   }
   static get is() { return "ptc-link"; }
@@ -136,8 +138,8 @@ export class PtcLink {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'simple' | 'underline' | 'nav-title'| 'primary-nav-link' | 'nav-title-link' | 'nav-card-link' | 'secondary-nav-link' | 'footer-nav-link' | 'copyright-link' | 'product-link' | 'd-green-underline' | 'd-white-underline'",
-          "resolved": "\"copyright-link\" | \"d-green-underline\" | \"d-white-underline\" | \"footer-nav-link\" | \"nav-card-link\" | \"nav-title\" | \"nav-title-link\" | \"primary-nav-link\" | \"product-link\" | \"secondary-nav-link\" | \"simple\" | \"underline\"",
+          "original": "'simple' | 'underline' | 'nav-title'| 'primary-nav-link' | 'nav-title-link' | 'nav-card-link' | 'secondary-nav-link' | 'footer-nav-link' | 'copyright-link' | 'product-link' | 'd-green-underline' | 'd-white-underline' | 'global'",
+          "resolved": "\"copyright-link\" | \"d-green-underline\" | \"d-white-underline\" | \"footer-nav-link\" | \"global\" | \"nav-card-link\" | \"nav-title\" | \"nav-title-link\" | \"primary-nav-link\" | \"product-link\" | \"secondary-nav-link\" | \"simple\" | \"underline\"",
           "references": {}
         },
         "required": false,

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

@@ -10,7 +10,7 @@ export class PtcModal {
     this.rounded = false;
     this.showHeaderFooter = false;
     this.overlayHeight = undefined;
-    this.borderRadius = 'standard | large | pill | circle';
+    this.borderRadius = 'standard';
     this.isBioModal = false;
     this.bodyOverflowSetting = undefined;
   }
@@ -304,8 +304,8 @@ export class PtcModal {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "'standard' | 'large' | 'pill' | 'circle'",
+          "resolved": "\"circle\" | \"large\" | \"pill\" | \"standard\"",
           "references": {}
         },
         "required": false,
@@ -316,7 +316,7 @@ export class PtcModal {
         },
         "attribute": "border-radius",
         "reflect": false,
-        "defaultValue": "'standard | large | pill | circle'"
+        "defaultValue": "'standard'"
       },
       "isBioModal": {
         "type": "boolean",

package/dist/collection/components/ptc-pricing-tabs/ptc-pricing-tabs.css

@@ -679,6 +679,30 @@
   flex-wrap: wrap;
 }
 
+.u-align-self-start {
+  align-self: start;
+}
+
+.u-align-self-center {
+  align-self: center;
+}
+
+.u-align-self-stretch {
+  align-self: stretch;
+}
+
+.u-justify-self-start {
+  justify-self: start;
+}
+
+.u-justify-self-center {
+  justify-self: center;
+}
+
+.u-justify-self-stretch {
+  justify-self: stretch;
+}
+
 .embed-responsive {
   position: relative;
   display: block;

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

@@ -101,6 +101,14 @@
   transform: translateY(100%);
   right: 0px;
 }
+@-moz-document url-prefix() {
+  .tooltip.right {
+    right: unset !important;
+    top: 100px;
+    transform: translate(170%, 50%) !important;
+    height: fit-content;
+  }
+}
 .tooltip.right::after {
   top: 1px;
   left: 8px;