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

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

@@ -1,26 +1,26 @@
-import { h, Host } from '@stencil/core';
-import { ResponsivePictureVariables } from '../../utils/interfaces';
+import { h, Host, } from "@stencil/core";
+import { ResponsivePictureVariables, } from "../../utils/interfaces";
 export class PtcPicture {
   constructor() {
     this.src = undefined;
-    this.alt = 'image';
-    this.sizeXs = '510x340';
-    this.sizeSm = '1240x496';
-    this.sizeMd = '1366x500';
-    this.sizeLg = '1920x1080';
+    this.alt = "image";
+    this.sizeXs = "510x340";
+    this.sizeSm = "1240x496";
+    this.sizeMd = "1366x500";
+    this.sizeLg = "1920x1080";
     this.disableResize = false;
     this.oldSrc = undefined;
-    this.imagePosition = 'static';
+    this.imagePosition = "static";
     this.borderRadius = undefined;
     this.height = undefined;
     this.width = undefined;
-    this.objectFit = 'cover';
+    this.objectFit = "cover";
     this.isFullHeight = false;
     this.isFullWidth = false;
     this.styles = undefined;
-    this.imageAlignment = 'left';
+    this.imageAlignment = "left";
     this.maxWidth = undefined;
-    this.displayImage = 'block';
+    this.displayImage = "block";
   }
   WindowResize() {
     this.addIntersectionObserver();
@@ -47,17 +47,17 @@ export class PtcPicture {
     if (!this.src) {
       return;
     }
-    if ('IntersectionObserver' in window) {
-      let lazyLoadImages = new IntersectionObserver(entries => {
-        entries.forEach(entry => {
+    if ("IntersectionObserver" in window) {
+      let lazyLoadImages = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
           if (entry.isIntersecting) {
-            const image = this.el.shadowRoot.querySelector('img');
+            const image = this.el.shadowRoot.querySelector("img");
             image.src = this.setResponsiveBg();
             lazyLoadImages.unobserve(image);
           }
         });
       });
-      let tempImg = this.el.shadowRoot.querySelector('img');
+      let tempImg = this.el.shadowRoot.querySelector("img");
       if (tempImg) {
         lazyLoadImages.observe(tempImg);
       }
@@ -65,10 +65,10 @@ export class PtcPicture {
     else {
       // fall back to setTimeout for Safari and IE
       setTimeout(() => {
-        const image = this.el.shadowRoot.querySelector('img');
+        const image = this.el.shadowRoot.querySelector("img");
         image.src = this.setResponsiveBg();
         image.onload = () => {
-          image.removeAttribute('data-src');
+          image.removeAttribute("data-src");
         };
       }, 5000);
     }
@@ -76,17 +76,21 @@ export class PtcPicture {
   //responsive image
   setResponsiveBg() {
     // Define local variables
-    let backgrounds = (this.el.shadowRoot || document).querySelectorAll('img'), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
+    let backgrounds = (this.el.shadowRoot || document).querySelectorAll("img"), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
     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 (elData !== null) {
         return 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");
         }
       }
     }
@@ -94,18 +98,20 @@ export class PtcPicture {
   render() {
     const classMap = this.getCssClassMap();
     const classMapHost = this.getCssClassMapHost();
-    return (h(Host, { class: classMapHost }, this.styles && h("style", null, this.styles), h("img", Object.assign({ class: classMap, "data-xs": !!this.sizeXs ? `${this.src}` : `${this.src}`, "data-sm": !!this.sizeSm ? `${this.src}` : `${this.src}`, "data-md": !!this.sizeMd ? `${this.src}` : `${this.src}`, "data-lg": !!this.sizeLg ? `${this.src}` : `${this.src}` }, (!!this.width ? { width: this.width } : {}), (!!this.height ? { height: this.height } : {}), { alt: this.alt, style: Object.assign({}, (!!this.maxWidth ? { maxWidth: this.maxWidth + 'px' } : {})) })), h("slot", null)));
+    return (h(Host, { class: classMapHost }, this.styles && h("style", null, this.styles), h("img", Object.assign({ class: classMap, "data-xs": !!this.sizeXs ? `${this.src}` : `${this.src}`, "data-sm": !!this.sizeSm ? `${this.src}` : `${this.src}`, "data-md": !!this.sizeMd ? `${this.src}` : `${this.src}`, "data-lg": !!this.sizeLg ? `${this.src}` : `${this.src}` }, (!!this.width ? { width: this.width } : {}), (!!this.height ? { height: this.height } : {}), { alt: this.alt, style: Object.assign({}, (!!this.maxWidth
+        ? { maxWidth: this.maxWidth + "px" }
+        : {})) })), h("slot", null)));
   }
   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 = ResponsivePictureVariables.envs.length - 1; i >= 0; i--) {
       env = ResponsivePictureVariables.envs[i];
       // Add classes
-      temp.className = 'hidden-' + env;
+      temp.className = "hidden-" + env;
       // Found breakpoint
       if (temp.offsetParent === null) {
         // Remove our test node
@@ -119,26 +125,26 @@ export class PtcPicture {
     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";
     }
   }
   getCssClassMap() {
     return {
       [this.borderRadius]: this.borderRadius ? true : false,
       [this.objectFit]: true,
-      [this.isFullHeight ? 'is-full-height' : 'is-normal-height']: true,
-      [this.isFullWidth ? 'is-full-width' : 'is-normal-width']: true,
-      [this.displayImage]: true
+      [this.isFullHeight ? "is-full-height" : "is-normal-height"]: true,
+      [this.isFullWidth ? "is-full-width" : "is-normal-width"]: true,
+      [this.displayImage]: true,
     };
   }
   getCssClassMapHost() {
@@ -194,7 +200,7 @@ export class PtcPicture {
         },
         "attribute": "alt",
         "reflect": false,
-        "defaultValue": "'image'"
+        "defaultValue": "\"image\""
       },
       "sizeXs": {
         "type": "string",
@@ -212,7 +218,7 @@ export class PtcPicture {
         },
         "attribute": "size-xs",
         "reflect": false,
-        "defaultValue": "'510x340'"
+        "defaultValue": "\"510x340\""
       },
       "sizeSm": {
         "type": "string",
@@ -230,7 +236,7 @@ export class PtcPicture {
         },
         "attribute": "size-sm",
         "reflect": false,
-        "defaultValue": "'1240x496'"
+        "defaultValue": "\"1240x496\""
       },
       "sizeMd": {
         "type": "string",
@@ -248,7 +254,7 @@ export class PtcPicture {
         },
         "attribute": "size-md",
         "reflect": false,
-        "defaultValue": "'1366x500'"
+        "defaultValue": "\"1366x500\""
       },
       "sizeLg": {
         "type": "string",
@@ -266,7 +272,7 @@ export class PtcPicture {
         },
         "attribute": "size-lg",
         "reflect": false,
-        "defaultValue": "'1920x1080'"
+        "defaultValue": "\"1920x1080\""
       },
       "disableResize": {
         "type": "boolean",
@@ -290,7 +296,7 @@ export class PtcPicture {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'relative' | 'absolute' | 'static'",
+          "original": "\"relative\" | \"absolute\" | \"static\"",
           "resolved": "\"absolute\" | \"relative\" | \"static\"",
           "references": {}
         },
@@ -302,13 +308,13 @@ export class PtcPicture {
         },
         "attribute": "image-position",
         "reflect": false,
-        "defaultValue": "'static'"
+        "defaultValue": "\"static\""
       },
       "borderRadius": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'radius-standard' | 'radius-large' | 'radius-pill' | 'radius-circle'",
+          "original": "| \"radius-standard\"\r\n\t\t| \"radius-large\"\r\n\t\t| \"radius-pill\"\r\n\t\t| \"radius-circle\"",
           "resolved": "\"radius-circle\" | \"radius-large\" | \"radius-pill\" | \"radius-standard\"",
           "references": {}
         },
@@ -359,7 +365,7 @@ export class PtcPicture {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'cover' | 'fill' | 'contain' | 'scale-down' | 'none' | 'initial' | 'inherit'",
+          "original": "| \"cover\"\r\n\t\t| \"fill\"\r\n\t\t| \"contain\"\r\n\t\t| \"scale-down\"\r\n\t\t| \"none\"\r\n\t\t| \"initial\"\r\n\t\t| \"inherit\"",
           "resolved": "\"contain\" | \"cover\" | \"fill\" | \"inherit\" | \"initial\" | \"none\" | \"scale-down\"",
           "references": {}
         },
@@ -371,7 +377,7 @@ export class PtcPicture {
         },
         "attribute": "object-fit",
         "reflect": false,
-        "defaultValue": "'cover'"
+        "defaultValue": "\"cover\""
       },
       "isFullHeight": {
         "type": "boolean",
@@ -430,7 +436,7 @@ export class PtcPicture {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'left' | 'right' | 'center'",
+          "original": "\"left\" | \"right\" | \"center\"",
           "resolved": "\"center\" | \"left\" | \"right\"",
           "references": {}
         },
@@ -442,7 +448,7 @@ export class PtcPicture {
         },
         "attribute": "image-alignment",
         "reflect": false,
-        "defaultValue": "'left'"
+        "defaultValue": "\"left\""
       },
       "maxWidth": {
         "type": "string",
@@ -465,7 +471,7 @@ export class PtcPicture {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'inline' | 'inline-block' | 'block'",
+          "original": "\"inline\" | \"inline-block\" | \"block\"",
           "resolved": "\"block\" | \"inline\" | \"inline-block\"",
           "references": {}
         },
@@ -477,7 +483,7 @@ export class PtcPicture {
         },
         "attribute": "display-image",
         "reflect": false,
-        "defaultValue": "'block'"
+        "defaultValue": "\"block\""
       }
     };
   }

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

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */
@@ -5597,39 +5601,155 @@ a.disabled {
   cursor: not-allowed;
 }
 a:focus-visible {
-  outline: 5px solid #003DD6 !important;
+  outline: 5px solid #003dd6 !important;
   outline-offset: 0px !important;
   border-radius: var(--ptc-border-radius-standard);
 }
 
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .background-plm-grey a.light-link {
+.light-links a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.podcast-cta-section a,
+.vjs-social-share-links a),
+.light-links a.light-link,
+.background-grey-10 a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.podcast-cta-section a,
+.vjs-social-share-links a),
+.background-grey-10 a.light-link,
+.background-plm-grey a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.podcast-cta-section a,
+.vjs-social-share-links a),
+.background-plm-grey a.light-link {
   color: var(--color-blue-04);
   margin: -2px;
   border: 2px solid transparent;
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
+.light-links a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.podcast-cta-section a,
+.vjs-social-share-links a):visited,
+.light-links a.light-link:visited,
+.background-grey-10 a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.podcast-cta-section a,
+.vjs-social-share-links a):visited,
+.background-grey-10 a.light-link:visited,
+.background-plm-grey a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.podcast-cta-section a,
+.vjs-social-share-links a):visited,
+.background-plm-grey a.light-link:visited {
   color: var(--color-blue-06);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
+.light-links a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.podcast-cta-section a,
+.vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.podcast-cta-section a,
+.vjs-social-share-links a):visited:active,
+.light-links a.light-link:active,
+.light-links a.light-link:visited:active,
+.background-grey-10 a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.podcast-cta-section a,
+.vjs-social-share-links a):active,
+.background-grey-10 a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.podcast-cta-section a,
+.vjs-social-share-links a):visited:active,
+.background-grey-10 a.light-link:active,
+.background-grey-10 a.light-link:visited:active,
+.background-plm-grey a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.podcast-cta-section a,
+.vjs-social-share-links a):active,
+.background-plm-grey a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.podcast-cta-section a,
+.vjs-social-share-links a):visited:active,
+.background-plm-grey a.light-link:active,
+.background-plm-grey a.light-link:visited:active {
   transition: none;
   color: var(--color-blue-07);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
+.light-links a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.podcast-cta-section a,
+.vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.podcast-cta-section a,
+.vjs-social-share-links a):visited:hover,
+.light-links a.light-link:hover,
+.light-links a.light-link:visited:hover,
+.background-grey-10 a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.podcast-cta-section a,
+.vjs-social-share-links a):hover,
+.background-grey-10 a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.podcast-cta-section a,
+.vjs-social-share-links a):visited:hover,
+.background-grey-10 a.light-link:hover,
+.background-grey-10 a.light-link:visited:hover,
+.background-plm-grey a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.podcast-cta-section a,
+.vjs-social-share-links a):hover,
+.background-plm-grey a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.podcast-cta-section a,
+.vjs-social-share-links a):visited:hover,
+.background-plm-grey a.light-link:hover,
+.background-plm-grey a.light-link:visited:hover {
   color: var(--color-blue-05);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
+.light-links a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.podcast-cta-section a,
+.vjs-social-share-links a).disabled,
+.light-links a.light-link.disabled,
+.background-grey-10 a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.podcast-cta-section a,
+.vjs-social-share-links a).disabled,
+.background-grey-10 a.light-link.disabled,
+.background-plm-grey a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.podcast-cta-section a,
+.vjs-social-share-links a).disabled,
+.background-plm-grey a.light-link.disabled {
   color: var(--color-gray-04) !important;
   cursor: not-allowed;
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .background-plm-grey a.light-link:focus-visible {
+.light-links a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.podcast-cta-section a,
+.vjs-social-share-links a):focus-visible,
+.light-links a.light-link:focus-visible,
+.background-grey-10 a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.podcast-cta-section a,
+.vjs-social-share-links a):focus-visible,
+.background-grey-10 a.light-link:focus-visible,
+.background-plm-grey a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.podcast-cta-section a,
+.vjs-social-share-links a):focus-visible,
+.background-plm-grey a.light-link:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);
 }
-.light-links .podcast-cta-section a, .background-grey-10 .podcast-cta-section a, .background-plm-grey .podcast-cta-section a {
+.light-links .podcast-cta-section a,
+.background-grey-10 .podcast-cta-section a,
+.background-plm-grey .podcast-cta-section a {
   border: 2px solid transparent;
 }
-.light-links .podcast-cta-section a:focus-visible, .background-grey-10 .podcast-cta-section a:focus-visible, .background-plm-grey .podcast-cta-section a:focus-visible {
+.light-links .podcast-cta-section a:focus-visible,
+.background-grey-10 .podcast-cta-section a:focus-visible,
+.background-plm-grey .podcast-cta-section a:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);

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

@@ -1,4 +1,4 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class PtcPodcastCard {
   constructor() {
     this.heading = undefined;
@@ -6,7 +6,7 @@ export class PtcPodcastCard {
     this.altText = undefined;
   }
   render() {
-    return (h(Host, null, h("div", { class: "is-grid has-col-gap-lg" }, h("div", { class: "is-col is-col-4-md flex-col" }, h("div", { class: 'img-wrap' }, h("img", { src: this.imageSrc, class: "first-img", alt: this.altText }), h("span", { class: "second" }, h("img", { src: this.imageSrc, class: "second-img", alt: this.altText })), h("span", { class: "third" }, h("img", { src: this.imageSrc, class: "third-img", alt: this.altText })))), h("div", { class: "is-col is-col-8-md flex-col" }, h("div", { class: 'content-wrap' }, h("ptc-title", { type: "h3", "text-align": "left", "title-size": "large", "title-color": "gray", upperline: "no-upperline", "title-display": "block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7" }, this.heading), h("slot", { name: "seo-content" }), h("slot", null))))));
+    return (h(Host, null, h("div", { class: "is-grid has-col-gap-lg" }, h("div", { class: "is-col is-col-4-md flex-col" }, h("div", { class: "img-wrap" }, h("img", { src: this.imageSrc, class: "first-img", alt: this.altText }), h("span", { class: "second" }, h("img", { src: this.imageSrc, class: "second-img", alt: this.altText })), h("span", { class: "third" }, h("img", { src: this.imageSrc, class: "third-img", alt: this.altText })))), h("div", { class: "is-col is-col-8-md flex-col" }, h("div", { class: "content-wrap" }, h("ptc-title", { type: "h3", "text-align": "left", "title-size": "large", "title-color": "gray", upperline: "no-upperline", "title-display": "block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7" }, this.heading), h("slot", { name: "seo-content" }), h("slot", null))))));
   }
   static get is() { return "ptc-podcast-card"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/ptc-preferance-center-form/ptc-preferance-center-form.css

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

package/dist/collection/components/ptc-preferance-center-form/ptc-preferance-center-form.js

@@ -1,9 +1,9 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class PtcPreferanceCenterForm {
   updateAllCheckbox(status) {
-    const allCheckboxes = this.el.querySelectorAll('input');
+    const allCheckboxes = this.el.querySelectorAll("input");
     allCheckboxes.forEach((element) => {
-      if (element.type == 'checkbox') {
+      if (element.type == "checkbox") {
         element.checked = status;
       }
     });
@@ -12,17 +12,21 @@ export class PtcPreferanceCenterForm {
     this.onDataLookup();
   }
   render() {
-    return (h(Host, null, h("div", { class: "sel-all-wrapper" }, h("span", { class: "select-all", onClick: () => { this.updateAllCheckbox(true); } }, "Select All"), h("span", { class: "deselect-all", onClick: () => { this.updateAllCheckbox(false); } }, "Deselect All")), h("slot", null)));
+    return (h(Host, null, h("div", { class: "sel-all-wrapper" }, h("span", { class: "select-all", onClick: () => {
+        this.updateAllCheckbox(true);
+      } }, "Select All"), h("span", { class: "deselect-all", onClick: () => {
+        this.updateAllCheckbox(false);
+      } }, "Deselect All")), h("slot", null)));
   }
   //handle subscription dataLookup
   onDataLookup() {
-    const dataLookupElement = this.el.closest('ptc-data-lookup');
+    const dataLookupElement = this.el.closest("ptc-data-lookup");
     if (dataLookupElement) {
       //console.log('Perform Data Lookup...');
       dataLookupElement.performSubscriptionLookup();
     }
     else {
-      console.log('No Data Lookup...');
+      console.log("No Data Lookup...");
     }
   }
   static get is() { return "ptc-preferance-center-form"; }