@ptcwebops/ptcw-design 6.3.65-beta → 6.3.68-beta

package/dist/esm/ptc-img.entry.js

@@ -1,19 +1,19 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-c83db688.js';
 import { R as ResponsiveBgVariables } from './interfaces-4caedd26.js';
 
-const ptcImgCss = "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}}.smart-bg{width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:50% 50%}.smart-img{position:absolute;display:block;width:100%;height:100%;top:0;left:0;background-size:cover;background-repeat:no-repeat;background-position:50% 50%}.radius-standard{border-radius:var(--ptc-border-radius-standard)}.radius-standard-top{border-top-left-radius:var(--ptc-border-radius-standard);border-top-right-radius:var(--ptc-border-radius-standard)}.radius-large{border-radius:var(--ptc-border-radius-large)}.radius-large-top{border-top-left-radius:var(--ptc-border-radius-large);border-top-right-radius:var(--ptc-border-radius-large)}.lazy-bg{background-image:none !important;background-color:var(--color-gray-03)}@media only screen and (min-width: 768px){.hidden-xs{display:none !important}}@media (min-width: 768px) and (max-width: 991px){.hidden-sm{display:none !important}}@media (min-width: 992px) and (max-width: 1199px){.hidden-md{display:none !important}}@media only screen and (min-width: 768px){.hidden-lg{display:none !important}}.lazy-bg{background-image:none !important;background-color:var(--color-gray-03)}.ptc-img{position:relative;width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center center}img{width:100%;height:auto;display:block}.low-quality,.medium-quality,.high-quality{position:absolute;width:100%;height:100%;top:0;left:0;background-size:cover;background-repeat:no-repeat;background-position:center center;transition:opacity 0.5s ease-in-out}.low-quality{z-index:1}.medium-quality{z-index:2;opacity:0}.high-quality{z-index:3;opacity:0}";
+const ptcImgCss = "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}}.smart-bg{width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:50% 50%}.smart-img{position:absolute;display:block;width:100%;height:100%;top:0;left:0;background-size:cover;background-repeat:no-repeat;background-position:50% 50%}.radius-standard{border-radius:var(--ptc-border-radius-standard)}.radius-standard-top{border-top-left-radius:var(--ptc-border-radius-standard);border-top-right-radius:var(--ptc-border-radius-standard)}.radius-large{border-radius:var(--ptc-border-radius-large)}.radius-large-top{border-top-left-radius:var(--ptc-border-radius-large);border-top-right-radius:var(--ptc-border-radius-large)}.lazy-bg{background-image:none !important;background-color:var(--color-gray-03)}@media only screen and (min-width: 768px){.hidden-xs{display:none !important}}@media (min-width: 768px) and (max-width: 991px){.hidden-sm{display:none !important}}@media (min-width: 992px) and (max-width: 1199px){.hidden-md{display:none !important}}@media only screen and (min-width: 768px){.hidden-lg{display:none !important}}.lazy-bg{background-image:none !important;background-color:var(--color-gray-03)}.ptc-img{position:relative;width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center center}img{width:100%;height:auto;display:block}.low-quality,.medium-quality,.high-quality{position:absolute;width:100%;height:100%;top:0;left:0;background-size:cover;background-repeat:no-repeat;background-position:center center;transition:opacity 0.5s ease-in-out}.low-quality{z-index:1}.medium-quality{z-index:2;opacity:0}.high-quality{z-index:3;opacity:0}.ptc-img--lazy .lazy-bg{background-image:none !important;background-color:var(--color-gray-03)}.ptc-img--lazy .low-quality,.ptc-img--lazy .medium-quality,.ptc-img--lazy .high-quality{position:absolute;width:100%;height:100%;top:0;left:0;background-size:cover;background-repeat:no-repeat;background-position:center center;transition:opacity 0.5s ease-in-out}.ptc-img--lazy .low-quality{z-index:1}.ptc-img--lazy .medium-quality{z-index:2;opacity:0}.ptc-img--lazy .high-quality{z-index:3;opacity:0}";
 
 const PtcImg = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.sizeXs = '510x340';
-    this.sizeSm = '1240x496';
-    this.sizeMd = '1366x500';
-    this.sizeLg = '1920x1080';
+    this.sizeXs = "510x340";
+    this.sizeSm = "1240x496";
+    this.sizeMd = "1366x500";
+    this.sizeLg = "1920x1080";
     this.imgUrl = undefined;
-    this.imageType = 'smart-bg';
-    this.borderRadius = '';
-    this.loadMode = 'lazy-bg';
+    this.imageType = "smart-bg";
+    this.borderRadius = "";
+    this.loadMode = "lazy-bg";
     this.styles = undefined;
     this.enableLazyLoad = false;
     this.delay = 2000;
@@ -32,18 +32,20 @@ const PtcImg = class {
       // Lazy loading functionality
       return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: classMap }, h("div", { class: "low-quality", style: {
           backgroundImage: `url(${this.bgSrcLazy})`,
-          opacity: '1',
-          transition: 'opacity 0.5s ease-in-out',
+          opacity: "1",
+          transition: "opacity 0.5s ease-in-out",
         } }), h("div", { class: "medium-quality", style: {
-          opacity: '0',
-          transition: 'opacity 0.5s ease-in-out',
+          opacity: "0",
+          transition: "opacity 0.5s ease-in-out",
         } }), h("div", { class: "high-quality", style: {
-          opacity: '0',
-          transition: 'opacity 0.5s ease-in-out',
-        } }), this.imageType == 'smart-bg' ? h("slot", null) : null)));
+          opacity: "0",
+          transition: "opacity 0.5s ease-in-out",
+        } }), this.imageType == "smart-bg" ? h("slot", null) : null)));
     }
     else {
-      return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: classMap, "data-xs": this.bgSrcLazy || this.imgUrl, "data-sm": this.bgSrcLazy || this.imgUrl, "data-md": this.bgSrcLazy || this.imgUrl, "data-lg": this.bgSrcLazy || this.imgUrl, style: { backgroundImage: `url(${this.bgSrcLazy || this.imgUrl})` } }, 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.bgSrcLazy || this.imgUrl, "data-sm": this.bgSrcLazy || this.imgUrl, "data-md": this.bgSrcLazy || this.imgUrl, "data-lg": this.bgSrcLazy || this.imgUrl, style: {
+          backgroundImage: `url(${this.bgSrcLazy || this.imgUrl})`,
+        } }, this.imageType == "smart-bg" ? h("slot", null) : null)));
     }
   }
   componentWillLoad() {
@@ -51,15 +53,15 @@ const PtcImg = class {
       this.isInViewport = false;
     }
     if (this.enableLazyLoad && this.imgUrl) {
-      this.bgSrcLazy = this.getImageUrl('lq');
-      this.bgSrcMedium = this.getImageUrl('mq');
-      this.bgSrcHigh = this.getImageUrl('hq');
+      this.bgSrcLazy = this.getImageUrl("lq");
+      this.bgSrcMedium = this.getImageUrl("mq");
+      this.bgSrcHigh = this.getImageUrl("hq");
     }
     else {
-      console.warn('Image URL is undefined or invalid.');
-      this.bgSrcLazy = '';
-      this.bgSrcMedium = '';
-      this.bgSrcHigh = '';
+      console.warn("Image URL is undefined or invalid.");
+      this.bgSrcLazy = "";
+      this.bgSrcMedium = "";
+      this.bgSrcHigh = "";
     }
   }
   componentDidLoad() {
@@ -78,25 +80,25 @@ const PtcImg = class {
   }
   upgradeImageQuality() {
     if (this.isInViewport && !this.isImageUpgraded) {
-      console.log('Low-quality image is visible.');
+      console.log("Low-quality image is visible.");
       this.isImageUpgraded = true;
       setTimeout(() => {
-        const mediumLayer = this.el.querySelector('.medium-quality');
+        const mediumLayer = this.el.querySelector(".medium-quality");
         if (mediumLayer) {
           mediumLayer.style.backgroundImage = `url(${this.bgSrcMedium})`;
-          mediumLayer.style.opacity = '1';
-          console.log('Medium-quality image is now visible.');
+          mediumLayer.style.opacity = "1";
+          console.log("Medium-quality image is now visible.");
         }
         setTimeout(() => {
-          const highLayer = this.el.querySelector('.high-quality');
+          const highLayer = this.el.querySelector(".high-quality");
           if (highLayer) {
             highLayer.style.backgroundImage = `url(${this.bgSrcHigh})`;
-            highLayer.style.opacity = '1';
-            console.log('High-quality image is now visible.');
+            highLayer.style.opacity = "1";
+            console.log("High-quality image is now visible.");
           }
           if (mediumLayer) {
-            mediumLayer.style.opacity = '0';
-            console.log('Medium-quality image is hidden.');
+            mediumLayer.style.opacity = "0";
+            console.log("Medium-quality image is hidden.");
           }
         }, this.delay);
       }, this.delay / 2);
@@ -110,14 +112,18 @@ const PtcImg = class {
     for (var i = 0, len = backgrounds.length; i < len; i++) {
       // Set current variables
       el = backgrounds[i];
-      elData = el.getAttribute('data-' + currentBreakpoint);
+      elData = el.getAttribute("data-" + currentBreakpoint);
       // If the data attribute exists, set the background
       if (elData !== null) {
         el.style.backgroundImage = "url('" + elData + "')";
       }
       else {
-        if (typeof console == 'object') {
-          console.warn('Data attribute: data-' + currentBreakpoint + ' not found on element:\n\n' + el.outerHTML + '\n\n\n');
+        if (typeof console == "object") {
+          console.warn("Data attribute: data-" +
+            currentBreakpoint +
+            " not found on element:\n\n" +
+            el.outerHTML +
+            "\n\n\n");
         }
       }
     }
@@ -127,26 +133,26 @@ const PtcImg = class {
     if (!this.imgUrl) {
       return;
     }
-    if ('IntersectionObserver' in window) {
-      let lazyLoadBgs = (this.el || document).querySelectorAll('.lazy-bg');
+    if ("IntersectionObserver" in window) {
+      let lazyLoadBgs = (this.el || document).querySelectorAll(".lazy-bg");
       let bgObserver = new IntersectionObserver((entries) => {
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
             const image = entry.target;
-            image.classList.remove('lazy-bg');
+            image.classList.remove("lazy-bg");
             bgObserver.unobserve(image);
             this.isInViewport = true;
             this.upgradeImageQuality();
           }
         });
       });
-      lazyLoadBgs.forEach(image => {
+      lazyLoadBgs.forEach((image) => {
         bgObserver.observe(image);
       });
     }
   }
   getImageUrl(quality) {
-    if (this.imgUrl && this.imgUrl.includes('?')) {
+    if (this.imgUrl && this.imgUrl.includes("?")) {
       return `${this.imgUrl}&t=ptcjumbdesk${quality}`;
     }
     else {
@@ -159,19 +165,20 @@ const PtcImg = class {
       'ptc-img': true,
       [this.borderRadius]: true,
       [this.loadMode]: true,
+      [this.enableLazyLoad ? 'ptc-img--lazy' : '']: true,
       // [this.imageZIndex] : true
     };
   }
   getCurrentBreakPoints() {
     // Define local variables
-    let doc = window.document, temp = doc.createElement('div'), env;
+    let doc = window.document, temp = doc.createElement("div"), env;
     // Append test node
     doc.body.appendChild(temp);
     // Loop through breakpoints
     for (let i = ResponsiveBgVariables.envs.length - 1; i >= 0; i--) {
       env = ResponsiveBgVariables.envs[i];
       // Add classes
-      temp.className = 'hidden-' + env;
+      temp.className = "hidden-" + env;
       // Found breakpoint
       if (temp.offsetParent === null) {
         // Remove our test node
@@ -185,17 +192,17 @@ const PtcImg = class {
     return this.getFallbackBreakpoint();
   }
   getFallbackBreakpoint() {
-    if (window.matchMedia('(min-width: 992px)').matches) {
-      return 'lg';
+    if (window.matchMedia("(min-width: 992px)").matches) {
+      return "lg";
     }
-    else if (window.matchMedia('(min-width: 768px)').matches) {
-      return 'md';
+    else if (window.matchMedia("(min-width: 768px)").matches) {
+      return "md";
     }
-    else if (window.matchMedia('(min-width: 576px)').matches) {
-      return 'sm';
+    else if (window.matchMedia("(min-width: 576px)").matches) {
+      return "sm";
     }
     else {
-      return 'xs';
+      return "xs";
     }
   }
   get el() { return getElement(this); }

package/dist/esm/ptc-info-tile.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c83db688.js';
 
-const ptcInfoTileCss = "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}@media screen and (min-width: 992px){:host{flex:1}}.tile{position:relative;background-color:var(--color-white);border-radius:var(--ptc-border-radius-standard);overflow:hidden;cursor:pointer;transition:border 0.3s;max-width:360px;height:116px}.tile.image{width:299px;display:flex;flex-wrap:nowrap;flex-direction:row;align-items:stretch;margin:0 auto;box-shadow:var(--ptc-shadow-x-large);max-width:unset;height:100%;min-height:140px}@media screen and (min-width: 992px){.tile.image{width:unset;min-width:299px}}@media screen and (min-width: 1440px){.tile.image{min-height:116px}}.tile.image .tile-image{flex:0 0 120px;display:flex;align-items:center;overflow:hidden}.tile.image .tile-content{border-top:2px solid var(--color-white);border-bottom:2px solid var(--color-white);background:#FFF;text-align:left;flex:1;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;transition:border var(--ptc-transition-medium) var(--ptc-ease-in)}.tile.image:hover .tile-content{border-bottom:2px solid var(--color-blue-06);background:var(--color-white)}.tile.image:focus .tile-content,.tile.image:active .tile-content{border-bottom:2px solid var(--color-blue-06);background:var(--color-gray-01)}.tile.text{background-color:var(--color-white);border:1px solid var(--color-gray-03);width:268px}.tile.text:hover{border:1px solid var(--color-gray-07)}.tile.text:active{background-color:var(--color-gray-01);border:1px solid var(--color-gray-07)}.tile.text:focus-visible{outline-offset:1px}@media only screen and (min-width: 992px){.tile.text{width:auto;height:auto}}.tile.text .tile-content{padding:20px}.tile .tile-title-span{margin:0}.tile .tile-title-desc{margin:4px 0 0}.tile .link-overlay{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:1}.tile .tile-content{padding:var(--ptc-element-spacing-06)}.tile .tile-content .tile-title-span{color:var(--color-blue-07);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-medium)}.tile .tile-content p{color:var(--color-gray-10);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-p)}.tile:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}::slotted(img[slot=tile-image]){width:120px !important;height:100% !important;object-fit:cover;display:block;max-height:100%;position:absolute}::slotted(span[slot=tile-title]),::slotted(p[slot=tile-title]){color:var(--color-blue-07) !important;font-family:var(--ptc-font-latin) !important;font-size:var(--ptc-font-size-xx-small) !important;font-weight:var(--ptc-font-weight-medium) !important;text-align:left !important;margin:0px !important}::slotted(p[slot=tile-description]),::slotted(h2[slot=tile-description]),::slotted(h3[slot=tile-description]){color:var(--color-gray-10) !important;font-family:var(--ptc-font-latin) !important;font-size:var(--ptc-font-size-x-small) !important;font-weight:var(--ptc-font-weight-bold) !important;line-height:var(--ptc-line-height-p) !important;text-align:left !important;margin-bottom:0px !important}::slotted(h2[slot=tile-description]),::slotted(h3[slot=tile-description]){margin-top:0px !important}::slotted(p[slot=tile-title]){margin-bottom:0px !important}";
+const ptcInfoTileCss = "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}@media screen and (min-width: 992px){:host{flex:1}}.tile{position:relative;background-color:var(--color-white);border-radius:var(--ptc-border-radius-standard);overflow:hidden;cursor:pointer;transition:border 0.3s;max-width:360px;height:116px}.tile.image{width:299px;display:flex;flex-wrap:nowrap;flex-direction:row;align-items:stretch;margin:0 auto;box-shadow:var(--ptc-shadow-x-large);max-width:unset;height:100%;min-height:140px}@media screen and (min-width: 992px){.tile.image{width:unset;min-width:299px}}@media screen and (min-width: 1440px){.tile.image{min-height:116px}}.tile.image .tile-image{flex:0 0 120px;display:flex;align-items:center;overflow:hidden}.tile.image .tile-content{border-top:2px solid var(--color-white);border-bottom:2px solid var(--color-white);background:#fff;text-align:left;flex:1;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;transition:border var(--ptc-transition-medium) var(--ptc-ease-in)}.tile.image:hover .tile-content{border-bottom:2px solid var(--color-blue-06);background:var(--color-white)}.tile.image:focus .tile-content,.tile.image:active .tile-content{border-bottom:2px solid var(--color-blue-06);background:var(--color-gray-01)}.tile.text{background-color:var(--color-white);border:1px solid var(--color-gray-03);width:268px}.tile.text:hover{border:1px solid var(--color-gray-07)}.tile.text:active{background-color:var(--color-gray-01);border:1px solid var(--color-gray-07)}.tile.text:focus-visible{outline-offset:1px}@media only screen and (min-width: 992px){.tile.text{width:auto;height:auto}}.tile.text .tile-content{padding:20px}.tile .tile-title-span{margin:0}.tile .tile-title-desc{margin:4px 0 0}.tile .link-overlay{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:1}.tile .tile-content{padding:var(--ptc-element-spacing-06)}.tile .tile-content .tile-title-span{color:var(--color-blue-07);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-medium)}.tile .tile-content p{color:var(--color-gray-10);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-p)}.tile:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}::slotted(img[slot=tile-image]){width:120px !important;height:100% !important;object-fit:cover;display:block;max-height:100%;position:absolute}::slotted(span[slot=tile-title]),::slotted(p[slot=tile-title]){color:var(--color-blue-07) !important;font-family:var(--ptc-font-latin) !important;font-size:var(--ptc-font-size-xx-small) !important;font-weight:var(--ptc-font-weight-medium) !important;text-align:left !important;margin:0px !important}::slotted(p[slot=tile-description]),::slotted(h2[slot=tile-description]),::slotted(h3[slot=tile-description]){color:var(--color-gray-10) !important;font-family:var(--ptc-font-latin) !important;font-size:var(--ptc-font-size-x-small) !important;font-weight:var(--ptc-font-weight-bold) !important;line-height:var(--ptc-line-height-p) !important;text-align:left !important;margin-bottom:0px !important}::slotted(h2[slot=tile-description]),::slotted(h3[slot=tile-description]){margin-top:0px !important}::slotted(p[slot=tile-title]){margin-bottom:0px !important}";
 
 const PtcInfoTile = class {
   constructor(hostRef) {
@@ -17,9 +17,9 @@ const PtcInfoTile = class {
     this.tileClick.emit();
   }
   handleKeyPress(event) {
-    if (event.key === 'Enter') {
+    if (event.key === "Enter") {
       if (this.link) {
-        const linkElement = this.el.shadowRoot.querySelector('a.link-press');
+        const linkElement = this.el.shadowRoot.querySelector("a.link-press");
         if (linkElement) {
           linkElement.click();
         }
@@ -30,14 +30,14 @@ const PtcInfoTile = class {
     }
   }
   componentDidLoad() {
-    this.el.addEventListener('keydown', this.handleKeyPress.bind(this));
+    this.el.addEventListener("keydown", this.handleKeyPress.bind(this));
   }
   disconnectedCallback() {
-    this.el.removeEventListener('keydown', this.handleKeyPress.bind(this));
+    this.el.removeEventListener("keydown", this.handleKeyPress.bind(this));
   }
   render() {
     const content = (h("div", { class: "tile-content" }, h("span", { class: "tile-title-span" }, h("slot", { name: "tile-title" })), h("div", { class: "tile-title-desc" }, h("slot", { name: "tile-description" }))));
-    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { id: this.trackerId, class: `tile ${this.variant}`, onClick: () => this.handleClick(), tabindex: this.accessibilityIndex }, this.variant === 'image' && (h("div", { class: "tile-image" }, h("slot", { name: "tile-image" }))), content, this.link && h("a", { href: this.link, class: "link-overlay link-press", tabindex: "-1", target: this.target }))));
+    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { id: this.trackerId, class: `tile ${this.variant}`, onClick: () => this.handleClick(), tabindex: this.accessibilityIndex }, this.variant === "image" && (h("div", { class: "tile-image" }, h("slot", { name: "tile-image" }))), content, this.link && (h("a", { href: this.link, class: "link-overlay link-press", tabindex: "-1", target: this.target })))));
   }
   get el() { return getElement(this); }
 };

package/dist/esm/ptc-inline-cta.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, F as Fragment, H as Host, g as getElement } from './index-c83db688.js';
 
-const ptcInlineCtaCss = "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}:host .small-inline-cta-container{width:100%;height:max-content;display:grid;position:relative;align-items:center}:host .small-inline-cta-container .cta-bg{display:none}:host .small-inline-cta-container .cta-content{width:100%;display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--color-gray-08);border-radius:var(--ptc-border-radius-standard);padding:var(--ptc-element-spacing-05);box-sizing:border-box}:host .small-inline-cta-container .cta-content .cta-image{width:100%;height:200px}:host .small-inline-cta-container .cta-content .cta-body{width:100%;margin-top:var(--ptc-element-spacing-05);padding:0}:host .small-inline-cta-container .cta-content .cta-body .link-wrapper{display:block;outline:none;text-decoration:none;position:relative}:host .small-inline-cta-container .cta-content .cta-body .link-wrapper:before{content:\"\";position:absolute;display:inline-block;width:100%;height:100%;padding:16px;margin:-16px}:host .small-inline-cta-container .cta-content .cta-body .link-wrapper:hover{outline:none;text-decoration:none}:host .small-inline-cta-container .cta-content .cta-body .link-wrapper:focus-visible{padding:2px;border-radius:var(--ptc-border-radius-standard);border:2px solid white;outline:5px solid var(--keyboard-nav-outline)}@media only screen and (min-width: 768px){:host .small-inline-cta-container{margin-top:calc(var(--ptc-element-spacing-06) + var(--ptc-element-spacing-01));margin-bottom:calc(var(--ptc-element-spacing-06) + var(--ptc-element-spacing-01))}:host .small-inline-cta-container .cta-bg{display:block;width:80%;height:calc(100% + 16px + 16px);position:absolute;right:0;z-index:-1;background-color:var(--color-gray-08);border-radius:var(--ptc-border-radius-standard)}:host .small-inline-cta-container .cta-content{flex-direction:row;align-items:center;background-color:transparent;border-radius:none;padding:0}:host .small-inline-cta-container .cta-content .cta-image{width:35%;height:164px}:host .small-inline-cta-container .cta-content .cta-body{width:65%;justify-self:right;display:flex;align-items:center;box-sizing:border-box;padding-right:var(--ptc-element-spacing-07);padding-left:var(--ptc-element-spacing-07);margin-top:0;margin-bottom:0}}:host .big-inline-cta-container{width:100%;height:max-content;display:grid;position:relative;align-items:center}:host .big-inline-cta-container .cta-bg{display:none}:host .big-inline-cta-container .cta-content{width:100%;display:flex;flex-direction:column;border-radius:var(--ptc-border-radius-standard);padding:var(--ptc-element-spacing-05);box-sizing:border-box;background-color:var(--color-green-08)}:host .big-inline-cta-container .cta-content .cta-image{width:100%;height:300px}:host .big-inline-cta-container .cta-content .cta-body{width:100%;margin-top:var(--ptc-element-spacing-06)}:host .big-inline-cta-container .cta-content .cta-body .link-wrapper{display:block;outline:none;text-decoration:none;position:relative}:host .big-inline-cta-container .cta-content .cta-body .link-wrapper:before{content:\"\";position:absolute;display:inline-block;width:100%;height:100%;padding:24px;margin:-24px}:host .big-inline-cta-container .cta-content .cta-body .link-wrapper:hover{outline:none;text-decoration:none}:host .big-inline-cta-container .cta-content .cta-body .link-wrapper:focus-visible{padding:2px;border-radius:var(--ptc-border-radius-standard);border:2px solid white;outline:5px solid var(--keyboard-nav-outline)}@media only screen and (min-width: 480px){:host .big-inline-cta-container .cta-content .cta-body{margin-top:var(--ptc-element-spacing-04)}}@media only screen and (min-width: 768px){:host .big-inline-cta-container{margin-top:calc(var(--ptc-element-spacing-06) + var(--ptc-element-spacing-01));margin-bottom:calc(var(--ptc-element-spacing-06) + var(--ptc-element-spacing-01))}:host .big-inline-cta-container .cta-bg{display:block;width:80%;height:calc(100% + 24px + 24px);position:absolute;right:0;z-index:-1;border-radius:var(--ptc-border-radius-standard);background-color:var(--color-green-08)}:host .big-inline-cta-container .cta-content{flex-direction:row;align-items:center;border-radius:none;padding:0;background-color:transparent}:host .big-inline-cta-container .cta-content .cta-image{width:40%;height:400px;justify-self:left}:host .big-inline-cta-container .cta-content .cta-body{width:60%;justify-self:right;display:flex;align-items:center;box-sizing:border-box;padding-top:calc(var(--ptc-element-spacing-07) + var(--ptc-element-spacing-05));padding-right:var(--ptc-element-spacing-07);padding-bottom:calc(var(--ptc-element-spacing-08) + var(--ptc-element-spacing-04));padding-left:var(--ptc-element-spacing-07);margin-top:0}}:host .big-inline-cta-container.green .cta-content{background-color:var(--color-green-08)}@media only screen and (min-width: 768px){:host .big-inline-cta-container.green .cta-bg{background-color:var(--color-green-08)}:host .big-inline-cta-container.green .cta-content{background-color:transparent}}:host .big-inline-cta-container.blue .cta-content{background-color:var(--color-blue-08)}@media only screen and (min-width: 768px){:host .big-inline-cta-container.blue .cta-bg{background-color:var(--color-blue-08)}:host .big-inline-cta-container.blue .cta-content{background-color:transparent}}:host .big-inline-cta-container.gray .cta-content{background-color:var(--color-gray-08)}@media only screen and (min-width: 768px){:host .big-inline-cta-container.gray .cta-bg{background-color:var(--color-gray-08)}:host .big-inline-cta-container.gray .cta-content{background-color:transparent}}:host .bottom-inline-cta-container{background-color:#FFF;padding:var(--ptc-element-spacing-06);display:flex;gap:var(--ptc-element-spacing-06);flex-direction:column;border-radius:var(--ptc-border-radius-standard)}:host .bottom-inline-cta-container .cta-image{flex:none;height:230px}:host .bottom-inline-cta-container .link-wrapper{display:block;outline:none;text-decoration:none;position:relative}:host .bottom-inline-cta-container .link-wrapper:before{content:\"\";position:absolute;display:inline-block;width:100%;height:100%;padding:24px;margin:-24px}:host .bottom-inline-cta-container .link-wrapper:hover{outline:none;text-decoration:none}:host .bottom-inline-cta-container .link-wrapper:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}@media only screen and (min-width: 768px){:host .bottom-inline-cta-container{flex-direction:row;gap:0}:host .bottom-inline-cta-container .cta-image{height:inherit;width:50%;display:block;position:relative}:host .bottom-inline-cta-container .cta-image ptc-picture{position:absolute;top:0;right:12px;bottom:0;left:0}:host .bottom-inline-cta-container .cta-body{height:max-content;width:50%;display:block;padding-left:12px}}";
+const ptcInlineCtaCss = "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}:host .small-inline-cta-container{width:100%;height:max-content;display:grid;position:relative;align-items:center}:host .small-inline-cta-container .cta-bg{display:none}:host .small-inline-cta-container .cta-content{width:100%;display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--color-gray-08);border-radius:var(--ptc-border-radius-standard);padding:var(--ptc-element-spacing-05);box-sizing:border-box}:host .small-inline-cta-container .cta-content .cta-image{width:100%;height:200px}:host .small-inline-cta-container .cta-content .cta-body{width:100%;margin-top:var(--ptc-element-spacing-05);padding:0}:host .small-inline-cta-container .cta-content .cta-body .link-wrapper{display:block;outline:none;text-decoration:none;position:relative}:host .small-inline-cta-container .cta-content .cta-body .link-wrapper:before{content:\"\";position:absolute;display:inline-block;width:100%;height:100%;padding:16px;margin:-16px}:host .small-inline-cta-container .cta-content .cta-body .link-wrapper:hover{outline:none;text-decoration:none}:host .small-inline-cta-container .cta-content .cta-body .link-wrapper:focus-visible{padding:2px;border-radius:var(--ptc-border-radius-standard);border:2px solid white;outline:5px solid var(--keyboard-nav-outline)}@media only screen and (min-width: 768px){:host .small-inline-cta-container{margin-top:calc(var(--ptc-element-spacing-06) + var(--ptc-element-spacing-01));margin-bottom:calc(var(--ptc-element-spacing-06) + var(--ptc-element-spacing-01))}:host .small-inline-cta-container .cta-bg{display:block;width:80%;height:calc(100% + 16px + 16px);position:absolute;right:0;z-index:-1;background-color:var(--color-gray-08);border-radius:var(--ptc-border-radius-standard)}:host .small-inline-cta-container .cta-content{flex-direction:row;align-items:center;background-color:transparent;border-radius:none;padding:0}:host .small-inline-cta-container .cta-content .cta-image{width:35%;height:164px}:host .small-inline-cta-container .cta-content .cta-body{width:65%;justify-self:right;display:flex;align-items:center;box-sizing:border-box;padding-right:var(--ptc-element-spacing-07);padding-left:var(--ptc-element-spacing-07);margin-top:0;margin-bottom:0}}:host .big-inline-cta-container{width:100%;height:max-content;display:grid;position:relative;align-items:center}:host .big-inline-cta-container .cta-bg{display:none}:host .big-inline-cta-container .cta-content{width:100%;display:flex;flex-direction:column;border-radius:var(--ptc-border-radius-standard);padding:var(--ptc-element-spacing-05);box-sizing:border-box;background-color:var(--color-green-08)}:host .big-inline-cta-container .cta-content .cta-image{width:100%;height:300px}:host .big-inline-cta-container .cta-content .cta-body{width:100%;margin-top:var(--ptc-element-spacing-06)}:host .big-inline-cta-container .cta-content .cta-body .link-wrapper{display:block;outline:none;text-decoration:none;position:relative}:host .big-inline-cta-container .cta-content .cta-body .link-wrapper:before{content:\"\";position:absolute;display:inline-block;width:100%;height:100%;padding:24px;margin:-24px}:host .big-inline-cta-container .cta-content .cta-body .link-wrapper:hover{outline:none;text-decoration:none}:host .big-inline-cta-container .cta-content .cta-body .link-wrapper:focus-visible{padding:2px;border-radius:var(--ptc-border-radius-standard);border:2px solid white;outline:5px solid var(--keyboard-nav-outline)}@media only screen and (min-width: 480px){:host .big-inline-cta-container .cta-content .cta-body{margin-top:var(--ptc-element-spacing-04)}}@media only screen and (min-width: 768px){:host .big-inline-cta-container{margin-top:calc(var(--ptc-element-spacing-06) + var(--ptc-element-spacing-01));margin-bottom:calc(var(--ptc-element-spacing-06) + var(--ptc-element-spacing-01))}:host .big-inline-cta-container .cta-bg{display:block;width:80%;height:calc(100% + 24px + 24px);position:absolute;right:0;z-index:-1;border-radius:var(--ptc-border-radius-standard);background-color:var(--color-green-08)}:host .big-inline-cta-container .cta-content{flex-direction:row;align-items:center;border-radius:none;padding:0;background-color:transparent}:host .big-inline-cta-container .cta-content .cta-image{width:40%;height:400px;justify-self:left}:host .big-inline-cta-container .cta-content .cta-body{width:60%;justify-self:right;display:flex;align-items:center;box-sizing:border-box;padding-top:calc(var(--ptc-element-spacing-07) + var(--ptc-element-spacing-05));padding-right:var(--ptc-element-spacing-07);padding-bottom:calc(var(--ptc-element-spacing-08) + var(--ptc-element-spacing-04));padding-left:var(--ptc-element-spacing-07);margin-top:0}}:host .big-inline-cta-container.green .cta-content{background-color:var(--color-green-08)}@media only screen and (min-width: 768px){:host .big-inline-cta-container.green .cta-bg{background-color:var(--color-green-08)}:host .big-inline-cta-container.green .cta-content{background-color:transparent}}:host .big-inline-cta-container.blue .cta-content{background-color:var(--color-blue-08)}@media only screen and (min-width: 768px){:host .big-inline-cta-container.blue .cta-bg{background-color:var(--color-blue-08)}:host .big-inline-cta-container.blue .cta-content{background-color:transparent}}:host .big-inline-cta-container.gray .cta-content{background-color:var(--color-gray-08)}@media only screen and (min-width: 768px){:host .big-inline-cta-container.gray .cta-bg{background-color:var(--color-gray-08)}:host .big-inline-cta-container.gray .cta-content{background-color:transparent}}:host .bottom-inline-cta-container{background-color:#fff;padding:var(--ptc-element-spacing-06);display:flex;gap:var(--ptc-element-spacing-06);flex-direction:column;border-radius:var(--ptc-border-radius-standard)}:host .bottom-inline-cta-container .cta-image{flex:none;height:230px}:host .bottom-inline-cta-container .link-wrapper{display:block;outline:none;text-decoration:none;position:relative}:host .bottom-inline-cta-container .link-wrapper:before{content:\"\";position:absolute;display:inline-block;width:100%;height:100%;padding:24px;margin:-24px}:host .bottom-inline-cta-container .link-wrapper:hover{outline:none;text-decoration:none}:host .bottom-inline-cta-container .link-wrapper:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}@media only screen and (min-width: 768px){:host .bottom-inline-cta-container{flex-direction:row;gap:0}:host .bottom-inline-cta-container .cta-image{height:inherit;width:50%;display:block;position:relative}:host .bottom-inline-cta-container .cta-image ptc-picture{position:absolute;top:0;right:12px;bottom:0;left:0}:host .bottom-inline-cta-container .cta-body{height:max-content;width:50%;display:block;padding-left:12px}}";
 
 const idxBgClassMapper = {
   0: "green",
@@ -12,8 +12,10 @@ const PtcInlineCta = class {
     registerInstance(this, hostRef);
     this.captureSlots = () => {
       var _a, _b, _c, _d;
-      this.image = (_a = this.hostEle) === null || _a === void 0 ? void 0 : _a.querySelector('[slot="cta-image"]');
-      this.cta = (_b = this.hostEle) === null || _b === void 0 ? void 0 : _b.querySelector('[slot="cta-link"]');
+      this.image =
+        (_a = this.hostEle) === null || _a === void 0 ? void 0 : _a.querySelector('[slot="cta-image"]');
+      this.cta =
+        (_b = this.hostEle) === null || _b === void 0 ? void 0 : _b.querySelector('[slot="cta-link"]');
       const heading = (_c = this.hostEle) === null || _c === void 0 ? void 0 : _c.querySelector('[slot="cta-heading"]');
       const description = (_d = this.hostEle) === null || _d === void 0 ? void 0 : _d.querySelector('[slot="cta-description"]');
       this.heading = (heading === null || heading === void 0 ? void 0 : heading.innerText) || "";
@@ -25,39 +27,42 @@ const PtcInlineCta = class {
       if (this.containerSelector) {
         const container = document.querySelector(this.containerSelector);
         if (this.containerIsShadow) {
-          inlineCtas = (_a = container === null || container === void 0 ? void 0 : container.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('ptc-inline-cta');
+          inlineCtas =
+            (_a = container === null || container === void 0 ? void 0 : container.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("ptc-inline-cta");
         }
         else {
-          inlineCtas = container === null || container === void 0 ? void 0 : container.querySelectorAll('ptc-inline-cta');
+          inlineCtas = container === null || container === void 0 ? void 0 : container.querySelectorAll("ptc-inline-cta");
         }
       }
       else {
-        inlineCtas = document.querySelectorAll('ptc-inline-cta');
+        inlineCtas = document.querySelectorAll("ptc-inline-cta");
       }
-      inlineCtas && inlineCtas.forEach((cta, idx) => {
-        var _a, _b;
-        if (cta == this.hostEle) {
-          const bgVariationCount = Object.keys(idxBgClassMapper).length;
-          const bgClass = idxBgClassMapper[idx % bgVariationCount];
-          const ctaContainer = (_b = (_a = this.hostEle) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.big-inline-cta-container');
-          if (ctaContainer) {
-            ctaContainer.classList.add(bgClass);
+      inlineCtas &&
+        inlineCtas.forEach((cta, idx) => {
+          var _a, _b;
+          if (cta == this.hostEle) {
+            const bgVariationCount = Object.keys(idxBgClassMapper).length;
+            const bgClass = idxBgClassMapper[idx % bgVariationCount];
+            const ctaContainer = (_b = (_a = this.hostEle) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(".big-inline-cta-container");
+            if (ctaContainer) {
+              ctaContainer.classList.add(bgClass);
+            }
           }
-        }
-      });
+        });
     };
     this.truncate = (str, limit) => {
-      return (str.length <= limit) ? str : (str.substring(0, limit) + "...");
+      return str.length <= limit ? str : str.substring(0, limit) + "...";
     };
     this.handleFocus = (e, linkWrapper) => {
       var _a, _b, _c, _d;
       switch (this.type) {
-        case 'small':
-          (_a = linkWrapper.querySelector('ptc-link')) === null || _a === void 0 ? void 0 : _a.focus();
+        case "small":
+          (_a = linkWrapper.querySelector("ptc-link")) === null || _a === void 0 ? void 0 : _a.focus();
           break;
         default:
-          if (e.relatedTarget.nodeName !== 'PTC-BUTTON') {
-            (_d = (_c = (_b = linkWrapper.querySelector('ptc-button')) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('button')) === null || _d === void 0 ? void 0 : _d.focus();
+          if (e.relatedTarget.nodeName !== "PTC-BUTTON") {
+            (_d = (_c = (_b = linkWrapper
+              .querySelector("ptc-button")) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector("button")) === null || _d === void 0 ? void 0 : _d.focus();
           }
           break;
       }
@@ -75,7 +80,7 @@ const PtcInlineCta = class {
       }
     };
     this.componentDidLoad = () => {
-      if (this.type === 'big') {
+      if (this.type === "big") {
         this.setBgColor();
       }
     };
@@ -86,7 +91,7 @@ const PtcInlineCta = class {
       // }
     };
     this.type = undefined;
-    this.containerSelector = '';
+    this.containerSelector = "";
     this.containerIsShadow = false;
     this.trackerId = "";
     this.rte = undefined;
@@ -98,25 +103,29 @@ const PtcInlineCta = class {
   render() {
     const Small = () => {
       var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-      return h("div", { class: "small-inline-cta-container" }, h("div", { class: "cta-bg" }), h("div", { class: "cta-content" }, h("div", { class: "cta-image" }, !!((_a = this.image) === null || _a === void 0 ? void 0 : _a.src) && h("ptc-picture", { alt: (_b = this.image) === null || _b === void 0 ? void 0 : _b.alt, "display-image": "block", "image-alignment": "center", "image-position": "relative", "is-full-height": "true", "is-full-width": "true", "object-fit": "cover", src: (_c = this.image) === null || _c === void 0 ? void 0 : _c.src, styles: "\r\n\t\t\t\t\t\t\t\t:host {\r\n\t\t\t\t\t\t\t\t\theight: 100%;\r\n\r\n\t\t\t\t\t\t\t\t\timg {\r\n\t\t\t\t\t\t\t\t\t\tborder-radius: var(--ptc-border-radius-standard);\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t" })), h("div", { class: "cta-body", id: this.trackerId }, h("a", { class: "cta-body-inner link-wrapper mf-listen", href: (_d = this.cta) === null || _d === void 0 ? void 0 : _d.href, target: (_e = this.cta) === null || _e === void 0 ? void 0 : _e.target, title: (_f = this.cta) === null || _f === void 0 ? void 0 : _f.title, tabindex: "0", "aria-label": "Inline CTA" }, !!this.heading && h("ptc-title", { type: "h4", "title-size": "medium", "title-weight": "w-7", "title-color": "white", "title-height": "densest", "title-margin": "margin-flush", upperline: 'no-upperline', "is-plm-hub": false }, this.truncate(this.heading, 70)), !!this.description && h(Fragment, null, h("ptc-spacer", { breakpoint: 'x-small', size: 'small' }), h("ptc-spacer", { breakpoint: 'small', size: 'x-small' }), h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-color": "white", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, this.truncate(this.description, 100))), !!((_g = this.cta) === null || _g === void 0 ? void 0 : _g.href) && h(Fragment, null, h("ptc-spacer", { breakpoint: 'x-small', size: 'small' }), h("ptc-spacer", { breakpoint: 'small', size: 'x-small' }), h("ptc-link", { disabled: false, "font-size": "small", theme: "d-green-underline", styles: ".d-green-underline {line-height: var(--ptc-line-height-p)}", "tab-nav": "-1", "link-title": (_h = this.cta) === null || _h === void 0 ? void 0 : _h.title }, (_j = this.cta) === null || _j === void 0 ? void 0 : _j.innerText))))));
+      return (h("div", { class: "small-inline-cta-container" }, h("div", { class: "cta-bg" }), h("div", { class: "cta-content" }, h("div", { class: "cta-image" }, !!((_a = this.image) === null || _a === void 0 ? void 0 : _a.src) && (h("ptc-picture", { alt: (_b = this.image) === null || _b === void 0 ? void 0 : _b.alt, "display-image": "block", "image-alignment": "center", "image-position": "relative", "is-full-height": "true", "is-full-width": "true", "object-fit": "cover", src: (_c = this.image) === null || _c === void 0 ? void 0 : _c.src, styles: "\r\n\t\t\t\t\t\t\t\t:host {\r\n\t\t\t\t\t\t\t\t\theight: 100%;\r\n\r\n\t\t\t\t\t\t\t\t\timg {\r\n\t\t\t\t\t\t\t\t\t\tborder-radius: var(--ptc-border-radius-standard);\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t" }))), h("div", { class: "cta-body", id: this.trackerId }, h("a", { class: "cta-body-inner link-wrapper mf-listen", href: (_d = this.cta) === null || _d === void 0 ? void 0 : _d.href, target: (_e = this.cta) === null || _e === void 0 ? void 0 : _e.target, title: (_f = this.cta) === null || _f === void 0 ? void 0 : _f.title, tabindex: "0", "aria-label": "Inline CTA" }, !!this.heading && (h("ptc-title", { type: "h4", "title-size": "medium", "title-weight": "w-7", "title-color": "white", "title-height": "densest", "title-margin": "margin-flush", upperline: "no-upperline", "is-plm-hub": false }, this.truncate(this.heading, 70))), !!this.description && (h(Fragment, null, h("ptc-spacer", { breakpoint: "x-small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-color": "white", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, this.truncate(this.description, 100)))), !!((_g = this.cta) === null || _g === void 0 ? void 0 : _g.href) && (h(Fragment, null, h("ptc-spacer", { breakpoint: "x-small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("ptc-link", { disabled: false, "font-size": "small", theme: "d-green-underline", styles: ".d-green-underline {line-height: var(--ptc-line-height-p)}", "tab-nav": "-1", "link-title": (_h = this.cta) === null || _h === void 0 ? void 0 : _h.title }, (_j = this.cta) === null || _j === void 0 ? void 0 : _j.innerText))))))));
     };
     const Big = () => {
       var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-      return h("div", { class: "big-inline-cta-container" }, h("div", { class: "cta-bg" }), h("div", { class: "cta-content" }, h("div", { class: "cta-image" }, !!((_a = this.image) === null || _a === void 0 ? void 0 : _a.src) && h("ptc-picture", { alt: (_b = this.image) === null || _b === void 0 ? void 0 : _b.alt, "display-image": "block", "image-alignment": "center", "image-position": "relative", "is-full-height": "true", "is-full-width": "true", "object-fit": "cover", src: (_c = this.image) === null || _c === void 0 ? void 0 : _c.src, styles: "\r\n\t\t\t\t\t\t\t\t:host {\r\n\t\t\t\t\t\t\t\t\theight: 100%;\r\n\r\n\t\t\t\t\t\t\t\t\timg {\r\n\t\t\t\t\t\t\t\t\t\tborder-radius: var(--ptc-border-radius-standard);\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t};\r\n\t\t\t\t\t\t\t" })), h("div", { class: "cta-body", id: this.trackerId }, h("a", { class: "cta-body-inner link-wrapper mf-listen", href: (_d = this.cta) === null || _d === void 0 ? void 0 : _d.href, target: (_e = this.cta) === null || _e === void 0 ? void 0 : _e.target, title: (_f = this.cta) === null || _f === void 0 ? void 0 : _f.title, tabindex: "0", "aria-label": "Inline CTA" }, !!this.heading && h("ptc-title", { type: "h3", "title-size": "large", "title-weight": "w-7", "title-color": "white", "title-height": "densest", "title-margin": "margin-flush", upperline: 'no-upperline', "is-plm-hub": false }, this.truncate(this.heading, 70)), !!this.description && h(Fragment, null, h("ptc-spacer", { breakpoint: 'x-small', size: 'large' }), h("ptc-spacer", { breakpoint: 'small', size: 'medium' }), h("ptc-para", { "font-size": "small", "font-weight": "w-4", "para-color": "white", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, this.truncate(this.description, 200))), !!((_g = this.cta) === null || _g === void 0 ? void 0 : _g.href) && h(Fragment, null, h("ptc-spacer", { breakpoint: 'x-small', size: 'xx-large' }), h("ptc-spacer", { breakpoint: 'small', size: 'x-large' }), h("ptc-spacer", { breakpoint: 'x-small', size: 'x-small' }), h("ptc-spacer", { breakpoint: 'small', size: 'xx-small' }), h("ptc-button", { color: "ptc-tertiary", disabled: false, type: "button", styles: ".ptc-tertiary  {border: 2px solid #FFFFFF !important}", "tab-nav": "-1", "button-title": (_h = this.cta) === null || _h === void 0 ? void 0 : _h.title }, (_j = this.cta) === null || _j === void 0 ? void 0 : _j.innerText))))));
+      return (h("div", { class: "big-inline-cta-container" }, h("div", { class: "cta-bg" }), h("div", { class: "cta-content" }, h("div", { class: "cta-image" }, !!((_a = this.image) === null || _a === void 0 ? void 0 : _a.src) && (h("ptc-picture", { alt: (_b = this.image) === null || _b === void 0 ? void 0 : _b.alt, "display-image": "block", "image-alignment": "center", "image-position": "relative", "is-full-height": "true", "is-full-width": "true", "object-fit": "cover", src: (_c = this.image) === null || _c === void 0 ? void 0 : _c.src, styles: "\r\n\t\t\t\t\t\t\t\t:host {\r\n\t\t\t\t\t\t\t\t\theight: 100%;\r\n\r\n\t\t\t\t\t\t\t\t\timg {\r\n\t\t\t\t\t\t\t\t\t\tborder-radius: var(--ptc-border-radius-standard);\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t};\r\n\t\t\t\t\t\t\t" }))), h("div", { class: "cta-body", id: this.trackerId }, h("a", { class: "cta-body-inner link-wrapper mf-listen", href: (_d = this.cta) === null || _d === void 0 ? void 0 : _d.href, target: (_e = this.cta) === null || _e === void 0 ? void 0 : _e.target, title: (_f = this.cta) === null || _f === void 0 ? void 0 : _f.title, tabindex: "0", "aria-label": "Inline CTA" }, !!this.heading && (h("ptc-title", { type: "h3", "title-size": "large", "title-weight": "w-7", "title-color": "white", "title-height": "densest", "title-margin": "margin-flush", upperline: "no-upperline", "is-plm-hub": false }, this.truncate(this.heading, 70))), !!this.description && (h(Fragment, null, h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-para", { "font-size": "small", "font-weight": "w-4", "para-color": "white", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, this.truncate(this.description, 200)))), !!((_g = this.cta) === null || _g === void 0 ? void 0 : _g.href) && (h(Fragment, null, h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-small" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("ptc-button", { color: "ptc-tertiary", disabled: false, type: "button", styles: ".ptc-tertiary  {border: 2px solid #FFFFFF !important}", "tab-nav": "-1", "button-title": (_h = this.cta) === null || _h === void 0 ? void 0 : _h.title }, (_j = this.cta) === null || _j === void 0 ? void 0 : _j.innerText))))))));
     };
     const Bottom = () => {
       var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-      return h("div", { class: "bottom-inline-cta-container" }, h("div", { class: "cta-image" }, !!((_a = this.image) === null || _a === void 0 ? void 0 : _a.src) && h("ptc-picture", { alt: (_b = this.image) === null || _b === void 0 ? void 0 : _b.alt, "display-image": "block", "image-alignment": "center", "image-position": "relative", "is-full-height": "true", "is-full-width": "true", "object-fit": "cover", src: (_c = this.image) === null || _c === void 0 ? void 0 : _c.src, styles: ":host {height: 100%;}" })), h("div", { id: this.trackerId, class: "cta-body" }, h("a", { class: "link-wrapper mf-listen", href: (_d = this.cta) === null || _d === void 0 ? void 0 : _d.href, target: (_e = this.cta) === null || _e === void 0 ? void 0 : _e.target, title: (_f = this.cta) === null || _f === void 0 ? void 0 : _f.title, tabindex: "0", "aria-label": "Inline CTA" }, !!this.heading && h("ptc-title", { "seo-compatibility-mode": true, type: "h2", "title-size": "xx-large", "title-weight": "w-8", "title-line-h": "densest", "title-margin": "margin-flush", upperline: 'no-upperline', "is-plm-hub": false }, h("h2", null, this.truncate(this.heading, 70))), !!this.description && h(Fragment, null, h("ptc-spacer", { breakpoint: 'x-small', size: 'small' }), h("ptc-spacer", { breakpoint: 'x-small', size: 'large' }), h("ptc-spacer", { breakpoint: 'small', size: 'medium' }), h("ptc-para", { "font-size": "small", "font-weight": "w-4", "para-line-h": "line-height-p", "para-margin": "margin-bottom-4" }, this.truncate(this.description, 100))), !!((_g = this.cta) === null || _g === void 0 ? void 0 : _g.href) && h("ptc-button", { color: "ptc-primary", disabled: false, type: "button", "tab-nav": "-1", "button-title": (_h = this.cta) === null || _h === void 0 ? void 0 : _h.title }, (_j = this.cta) === null || _j === void 0 ? void 0 : _j.innerText))));
+      return (h("div", { class: "bottom-inline-cta-container" }, h("div", { class: "cta-image" }, !!((_a = this.image) === null || _a === void 0 ? void 0 : _a.src) && (h("ptc-picture", { alt: (_b = this.image) === null || _b === void 0 ? void 0 : _b.alt, "display-image": "block", "image-alignment": "center", "image-position": "relative", "is-full-height": "true", "is-full-width": "true", "object-fit": "cover", src: (_c = this.image) === null || _c === void 0 ? void 0 : _c.src, styles: ":host {height: 100%;}" }))), h("div", { id: this.trackerId, class: "cta-body" }, h("a", { class: "link-wrapper mf-listen", href: (_d = this.cta) === null || _d === void 0 ? void 0 : _d.href, target: (_e = this.cta) === null || _e === void 0 ? void 0 : _e.target, title: (_f = this.cta) === null || _f === void 0 ? void 0 : _f.title, tabindex: "0", "aria-label": "Inline CTA" }, !!this.heading && (h("ptc-title", { "seo-compatibility-mode": true, type: "h2", "title-size": "xx-large", "title-weight": "w-8", "title-line-h": "densest", "title-margin": "margin-flush", upperline: "no-upperline", "is-plm-hub": false }, h("h2", null, this.truncate(this.heading, 70)))), !!this.description && (h(Fragment, null, h("ptc-spacer", { breakpoint: "x-small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-para", { "font-size": "small", "font-weight": "w-4", "para-line-h": "line-height-p", "para-margin": "margin-bottom-4" }, this.truncate(this.description, 100)))), !!((_g = this.cta) === null || _g === void 0 ? void 0 : _g.href) && (h("ptc-button", { color: "ptc-primary", disabled: false, type: "button", "tab-nav": "-1", "button-title": (_h = this.cta) === null || _h === void 0 ? void 0 : _h.title }, (_j = this.cta) === null || _j === void 0 ? void 0 : _j.innerText))))));
     };
     const InlineCta = () => {
       switch (this.type) {
-        case 'small': return h(Small, null);
-        case 'big': return h(Big, null);
-        case 'bottom': return h(Bottom, null);
-        default: return null;
+        case "small":
+          return h(Small, null);
+        case "big":
+          return h(Big, null);
+        case "bottom":
+          return h(Bottom, null);
+        default:
+          return null;
       }
     };
-    return (h(Host, null, h("ptc-spacer", { breakpoint: "x-small", size: "xxxx-large" }), h("ptc-spacer", { breakpoint: "small", size: "xxx-large" }), h("div", null, h(InlineCta, null)), (this.type === 'bottom') ? null : h(Fragment, null, h("ptc-spacer", { breakpoint: "x-small", size: "xxxx-large" }), h("ptc-spacer", { breakpoint: "small", size: "xxx-large" }))));
+    return (h(Host, null, h("ptc-spacer", { breakpoint: "x-small", size: "xxxx-large" }), h("ptc-spacer", { breakpoint: "small", size: "xxx-large" }), h("div", null, h(InlineCta, null)), this.type === "bottom" ? null : (h(Fragment, null, h("ptc-spacer", { breakpoint: "x-small", size: "xxxx-large" }), h("ptc-spacer", { breakpoint: "small", size: "xxx-large" })))));
   }
   get hostEle() { return getElement(this); }
 };