@ptcwebops/ptcw-design 6.3.37 → 6.3.38

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

@@ -1,13 +1,13 @@
-import { Host, h } from '@stencil/core';
-import { CheckDarkFocusState } from '../../utils/utils';
-import instagramSVG from '../../media/svg-imgs/instagram.svg';
-import facebookSVG from '../../media/svg-imgs/facebook.svg';
-import linkedinSVG from '../../media/svg-imgs/linkedin.svg';
-import xSVG from '../../media/svg-imgs/x.svg';
-import youtubeSVG from '../../media/svg-imgs/youtube.svg';
-import ykSVG from '../../media/svg-imgs/yk.svg';
-import weiboSVG from '../../media/svg-imgs/weibo.svg';
-import wechatSVG from '../../media/svg-imgs/wechat.svg';
+import { Host, h } from "@stencil/core";
+import { CheckDarkFocusState } from "../../utils/utils";
+import instagramSVG from "../../media/svg-imgs/instagram.svg";
+import facebookSVG from "../../media/svg-imgs/facebook.svg";
+import linkedinSVG from "../../media/svg-imgs/linkedin.svg";
+import xSVG from "../../media/svg-imgs/x.svg";
+import youtubeSVG from "../../media/svg-imgs/youtube.svg";
+import ykSVG from "../../media/svg-imgs/yk.svg";
+import weiboSVG from "../../media/svg-imgs/weibo.svg";
+import wechatSVG from "../../media/svg-imgs/wechat.svg";
 export class PtcSocialIconsFooter {
   constructor() {
     this.instagramUrl = undefined;
@@ -40,14 +40,24 @@ export class PtcSocialIconsFooter {
   }
   openModal(e) {
     e.preventDefault();
-    const modal = this.hostElement.shadowRoot.querySelector('#QRModal');
+    const modal = this.hostElement.shadowRoot.querySelector("#QRModal");
     modal.show = true;
   }
   componentWillLoad() {
     CheckDarkFocusState(this, this.hostElement);
   }
   render() {
-    return (h(Host, null, h("slot", null), h("ul", { class: this.darkFocusState ? `dark-bg` : `standard-bg` }, this.instagramUrl && h("li", { id: "footerInstagramIconID" }, " ", h("a", { href: this.instagramUrl, title: this.instagramImageAlt, innerHTML: this.instagramImageUrl == "" ? instagramSVG : "", target: this.target }, this.instagramImageUrl != "" && h("img", { src: this.instagramImageUrl, alt: this.instagramImageAlt })), " "), this.facebookUrl && h("li", { id: "footerFacebookIconID" }, " ", h("a", { href: this.facebookUrl, title: this.facebookImageAlt, innerHTML: this.facebookImageUrl == "" ? facebookSVG : "", target: this.target }, this.facebookImageUrl != "" && h("img", { src: this.facebookImageUrl, alt: this.facebookImageAlt })), " "), this.linkedinUrl && h("li", { id: "footerLinkedInIconID" }, " ", h("a", { href: this.linkedinUrl, title: this.linkedinImageAlt, innerHTML: this.linkedinImageUrl == "" ? linkedinSVG : "", target: this.target }, this.linkedinImageUrl != "" && h("img", { src: this.linkedinImageUrl, alt: this.linkedinImageAlt })), " "), this.xUrl && h("li", { id: "footerXIconID" }, " ", h("a", { href: this.xUrl, title: this.xImageAlt, innerHTML: this.xImageUrl == "" ? xSVG : "", target: this.target }, this.xImageUrl != "" && h("img", { src: this.xImageUrl, alt: this.xImageAlt, "aria-label": "X, formerly Twitter" })), " "), this.youtubeUrl && h("li", { id: "footerYouTubeIconID" }, " ", h("a", { href: this.youtubeUrl, title: this.youtubeImageAlt, innerHTML: this.youtubeImageUrl == "" ? youtubeSVG : "", target: this.target }, this.youtubeImageUrl != "" && h("img", { src: this.youtubeImageUrl, alt: this.youtubeImageAlt })), " "), this.weiboUrl && h("li", { id: "footerWeiboIconID" }, " ", h("a", { href: this.weiboUrl, title: this.weiboImageAlt, innerHTML: this.weiboImageUrl == "" ? weiboSVG : "", target: this.target }, this.weiboImageUrl != "" && h("img", { src: this.weiboImageUrl, alt: this.weiboImageAlt })), " "), this.youkuUrl && h("li", { id: "footerYouKuIconID" }, " ", h("a", { href: this.youkuUrl, title: this.youkuImageAlt, innerHTML: this.youkuImageUrl == "" ? ykSVG : "", target: this.target }, this.youkuImageUrl != "" && h("img", { src: this.youkuImageUrl, alt: this.youkuImageAlt })), " "), this.wechatQrImageUrl && h("li", { id: "footerWeChatIconID" }, " ", h("a", { href: "#", onClick: (Event) => { this.openModal(Event); }, title: this.wechatImageAlt != "" ? this.wechatImageAlt : "WeChat", innerHTML: this.wechatImageUrl == "" ? wechatSVG : "" }, this.wechatImageUrl != "" && h("img", { src: this.wechatImageUrl, alt: this.wechatImageAlt })), " ")), h("ptc-modal", { id: "QRModal", show: false, size: "sm", "close-on-blur": true, fixed: true, styles: '.wrapper .modal-popup .modal-body { padding-bottom: 40px}' }, h("ptc-picture", { alt: this.wechatQrImageAltText, src: this.wechatQrImageUrl, "max-width": '250', "image-alignment": 'center', styles: 'img{margin:auto}' }))));
+    return (h(Host, null, h("slot", null), h("ul", { class: this.darkFocusState ? `dark-bg` : `standard-bg` }, this.instagramUrl && (h("li", { id: "footerInstagramIconID" }, " ", h("a", { href: this.instagramUrl, title: this.instagramImageAlt, innerHTML: this.instagramImageUrl == ""
+        ? instagramSVG
+        : "", target: this.target }, this.instagramImageUrl != "" && (h("img", { src: this.instagramImageUrl, alt: this.instagramImageAlt }))), " ")), this.facebookUrl && (h("li", { id: "footerFacebookIconID" }, " ", h("a", { href: this.facebookUrl, title: this.facebookImageAlt, innerHTML: this.facebookImageUrl == ""
+        ? facebookSVG
+        : "", target: this.target }, this.facebookImageUrl != "" && (h("img", { src: this.facebookImageUrl, alt: this.facebookImageAlt }))), " ")), this.linkedinUrl && (h("li", { id: "footerLinkedInIconID" }, " ", h("a", { href: this.linkedinUrl, title: this.linkedinImageAlt, innerHTML: this.linkedinImageUrl == ""
+        ? linkedinSVG
+        : "", target: this.target }, this.linkedinImageUrl != "" && (h("img", { src: this.linkedinImageUrl, alt: this.linkedinImageAlt }))), " ")), this.xUrl && (h("li", { id: "footerXIconID" }, " ", h("a", { href: this.xUrl, title: this.xImageAlt, innerHTML: this.xImageUrl == "" ? xSVG : "", target: this.target }, this.xImageUrl != "" && (h("img", { src: this.xImageUrl, alt: this.xImageAlt, "aria-label": "X, formerly Twitter" }))), " ")), this.youtubeUrl && (h("li", { id: "footerYouTubeIconID" }, " ", h("a", { href: this.youtubeUrl, title: this.youtubeImageAlt, innerHTML: this.youtubeImageUrl == "" ? youtubeSVG : "", target: this.target }, this.youtubeImageUrl != "" && (h("img", { src: this.youtubeImageUrl, alt: this.youtubeImageAlt }))), " ")), this.weiboUrl && (h("li", { id: "footerWeiboIconID" }, " ", h("a", { href: this.weiboUrl, title: this.weiboImageAlt, innerHTML: this.weiboImageUrl == "" ? weiboSVG : "", target: this.target }, this.weiboImageUrl != "" && (h("img", { src: this.weiboImageUrl, alt: this.weiboImageAlt }))), " ")), this.youkuUrl && (h("li", { id: "footerYouKuIconID" }, " ", h("a", { href: this.youkuUrl, title: this.youkuImageAlt, innerHTML: this.youkuImageUrl == "" ? ykSVG : "", target: this.target }, this.youkuImageUrl != "" && (h("img", { src: this.youkuImageUrl, alt: this.youkuImageAlt }))), " ")), this.wechatQrImageUrl && (h("li", { id: "footerWeChatIconID" }, " ", h("a", { href: "#", onClick: (Event) => {
+        this.openModal(Event);
+      }, title: this.wechatImageAlt != ""
+        ? this.wechatImageAlt
+        : "WeChat", innerHTML: this.wechatImageUrl == "" ? wechatSVG : "" }, this.wechatImageUrl != "" && (h("img", { src: this.wechatImageUrl, alt: this.wechatImageAlt }))), " "))), h("ptc-modal", { id: "QRModal", show: false, size: "sm", "close-on-blur": true, fixed: true, styles: ".wrapper .modal-popup .modal-body { padding-bottom: 40px}" }, h("ptc-picture", { alt: this.wechatQrImageAltText, src: this.wechatQrImageUrl, "max-width": "250", "image-alignment": "center", styles: "img{margin:auto}" }))));
   }
   static get is() { return "ptc-social-icons-footer"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/ptc-social-share/ptc-social-share.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-social-share/ptc-social-share.js

@@ -1,33 +1,52 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class PtcSocialShare {
   constructor() {
     this.trackerId = undefined;
-    this.display = 'inline-block';
-    this.shareType = 'twitter';
+    this.display = "inline-block";
+    this.shareType = "twitter";
     this.shareTitle = undefined;
     this.text = undefined;
     this.url = undefined;
-    this.source = '';
-    this.recipient = '';
-    this.iconColor = 'white';
-    this.iconHoverColor = 'gray';
+    this.source = "";
+    this.recipient = "";
+    this.iconColor = "white";
+    this.iconHoverColor = "gray";
     this.isHover = false;
-    this.iconSize = 'large';
+    this.iconSize = "large";
     this.darkFocusState = false;
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, h("div", { onClick: () => this.share(), onMouseEnter: () => this.hoverToggle(), onMouseLeave: () => this.hoverToggle(), class: `focus-state mf-listen ${this.darkFocusState ? "focus-state-dark-background" : ""}`, tabindex: "0", onKeyDown: (event) => this.handleKeyDown(event), id: this.trackerId }, this.shareType == 'mail' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "plm-mail" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'linkedin' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "plm-linkedin" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'twitter' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "twitter-x" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'facebook' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "plm-fb" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'blog-mail' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "mail-blogs-icon" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'blog-linkedin' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "linkedin-blogs-icon" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'blog-twitter' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "twitter-x-dark-circle" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'blog-facebook' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "facebook-blogs-icon" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'share-api' ? h("icon-asset", Object.assign({ type: "solid", size: this.iconSize, name: "share-square" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'download' ? h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "download-arrow-news", color: "inherit" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null), this.shareType == 'download' &&
-      h("ptc-modal", { id: "download-modal", show: false, size: "lg", fixed: true, "is-bio-modal": true }, h("ptc-title", { type: 'h2', "text-align": 'center', "title-weight": "w-5", upperline: "no-upperline" }, "Thanks For Downloading"))));
+    return (h(Host, { class: classMap }, h("div", { onClick: () => this.share(), onMouseEnter: () => this.hoverToggle(), onMouseLeave: () => this.hoverToggle(), class: `focus-state mf-listen ${this.darkFocusState ? "focus-state-dark-background" : ""}`, tabindex: "0", onKeyDown: (event) => this.handleKeyDown(event), id: this.trackerId }, this.shareType == "mail" ? (h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "plm-mail" }, (this.isHover
+      ? { color: this.iconHoverColor }
+      : { color: this.iconColor })))) : null, this.shareType == "linkedin" ? (h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "plm-linkedin" }, (this.isHover
+      ? { color: this.iconHoverColor }
+      : { color: this.iconColor })))) : null, this.shareType == "twitter" ? (h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "twitter-x" }, (this.isHover
+      ? { color: this.iconHoverColor }
+      : { color: this.iconColor })))) : null, this.shareType == "facebook" ? (h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "plm-fb" }, (this.isHover
+      ? { color: this.iconHoverColor }
+      : { color: this.iconColor })))) : null, this.shareType == "blog-mail" ? (h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "mail-blogs-icon" }, (this.isHover
+      ? { color: this.iconHoverColor }
+      : { color: this.iconColor })))) : null, this.shareType == "blog-linkedin" ? (h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "linkedin-blogs-icon" }, (this.isHover
+      ? { color: this.iconHoverColor }
+      : { color: this.iconColor })))) : null, this.shareType == "blog-twitter" ? (h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "twitter-x-dark-circle" }, (this.isHover
+      ? { color: this.iconHoverColor }
+      : { color: this.iconColor })))) : null, this.shareType == "blog-facebook" ? (h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "facebook-blogs-icon" }, (this.isHover
+      ? { color: this.iconHoverColor }
+      : { color: this.iconColor })))) : null, this.shareType == "share-api" ? (h("icon-asset", Object.assign({ type: "solid", size: this.iconSize, name: "share-square" }, (this.isHover
+      ? { color: this.iconHoverColor }
+      : { color: this.iconColor })))) : null, this.shareType == "download" ? (h("icon-asset", Object.assign({ type: "ptc", size: this.iconSize, name: "download-arrow-news", color: "inherit" }, (this.isHover
+      ? { color: this.iconHoverColor }
+      : { color: this.iconColor })))) : null), this.shareType == "download" && (h("ptc-modal", { id: "download-modal", show: false, size: "lg", fixed: true, "is-bio-modal": true }, h("ptc-title", { type: "h2", "text-align": "center", "title-weight": "w-5", upperline: "no-upperline" }, "Thanks For Downloading")))));
   }
   handleKeyDown(event) {
-    if (event.key === 'Enter') {
+    if (event.key === "Enter") {
       this.share();
     }
   }
   getCssClassMap() {
     return {
-      ['ptc-social-share']: true,
+      ["ptc-social-share"]: true,
       [this.display]: true,
     };
   }
@@ -35,19 +54,19 @@ export class PtcSocialShare {
     this.isHover = !this.isHover;
   }
   share() {
-    if (this.shareType == 'twitter' || this.shareType == "blog-twitter") {
+    if (this.shareType == "twitter" || this.shareType == "blog-twitter") {
       window.open(`https://twitter.com/share?text=${this.text}&url=${this.url}`);
     }
-    if (this.shareType == 'facebook' || this.shareType == "blog-facebook") {
+    if (this.shareType == "facebook" || this.shareType == "blog-facebook") {
       window.open(`https://www.facebook.com/sharer/sharer.php?u=${this.url}`);
     }
-    if (this.shareType == 'linkedin' || this.shareType == "blog-linkedin") {
+    if (this.shareType == "linkedin" || this.shareType == "blog-linkedin") {
       window.open(`https://www.linkedin.com/shareArticle?mini=true&url=${this.url}&title=${this.shareTitle}&summary=${this.text}&source=${this.source}`);
     }
-    if (this.shareType == 'mail' || this.shareType == "blog-mail") {
+    if (this.shareType == "mail" || this.shareType == "blog-mail") {
       window.open(`mailto:${this.recipient}?subject=${this.text}&body=${this.url}`);
     }
-    if (this.shareType == 'share-api') {
+    if (this.shareType == "share-api") {
       if (navigator.share) {
         navigator
           .share({
@@ -55,19 +74,19 @@ export class PtcSocialShare {
           text: this.text,
           url: this.url,
         })
-          .then(() => console.log('Successful share'))
-          .catch(error => console.log('Error sharing', error));
+          .then(() => console.log("Successful share"))
+          .catch((error) => console.log("Error sharing", error));
       }
       else {
         // fallback to sharing to twitter
         window.open(`http://twitter.com/share?text=${this.text}&url=${this.url}`);
       }
     }
-    if (this.shareType == 'download') {
-      let modal = this.el.shadowRoot.querySelector('#download-modal');
-      modal.setAttribute('show', 'true');
+    if (this.shareType == "download") {
+      let modal = this.el.shadowRoot.querySelector("#download-modal");
+      modal.setAttribute("show", "true");
       setTimeout(() => {
-        modal.setAttribute('show', 'false');
+        modal.setAttribute("show", "false");
         window.open(`${this.url}`, "_self");
       }, 1000);
     }
@@ -107,7 +126,7 @@ export class PtcSocialShare {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'inline-block' | 'block' | 'inline' | 'flex'",
+          "original": "\"inline-block\" | \"block\" | \"inline\" | \"flex\"",
           "resolved": "\"block\" | \"flex\" | \"inline\" | \"inline-block\"",
           "references": {}
         },
@@ -119,13 +138,13 @@ export class PtcSocialShare {
         },
         "attribute": "display",
         "reflect": false,
-        "defaultValue": "'inline-block'"
+        "defaultValue": "\"inline-block\""
       },
       "shareType": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'mail' | 'twitter' | 'linkedin' | 'facebook' | 'share-api' | 'download' | 'blog-mail' | 'blog-twitter' | 'blog-linkedin' | 'blog-facebook'",
+          "original": "| \"mail\"\r\n\t\t| \"twitter\"\r\n\t\t| \"linkedin\"\r\n\t\t| \"facebook\"\r\n\t\t| \"share-api\"\r\n\t\t| \"download\"\r\n\t\t| \"blog-mail\"\r\n\t\t| \"blog-twitter\"\r\n\t\t| \"blog-linkedin\"\r\n\t\t| \"blog-facebook\"",
           "resolved": "\"blog-facebook\" | \"blog-linkedin\" | \"blog-mail\" | \"blog-twitter\" | \"download\" | \"facebook\" | \"linkedin\" | \"mail\" | \"share-api\" | \"twitter\"",
           "references": {}
         },
@@ -137,7 +156,7 @@ export class PtcSocialShare {
         },
         "attribute": "share-type",
         "reflect": false,
-        "defaultValue": "'twitter'"
+        "defaultValue": "\"twitter\""
       },
       "shareTitle": {
         "type": "string",
@@ -206,7 +225,7 @@ export class PtcSocialShare {
         },
         "attribute": "source",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "\"\""
       },
       "recipient": {
         "type": "string",
@@ -224,13 +243,13 @@ export class PtcSocialShare {
         },
         "attribute": "recipient",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "\"\""
       },
       "iconColor": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'black' | 'white' | 'ptc-green' | 'gray' | 'primary-gray' | 'inherit'",
+          "original": "| \"black\"\r\n\t\t| \"white\"\r\n\t\t| \"ptc-green\"\r\n\t\t| \"gray\"\r\n\t\t| \"primary-gray\"\r\n\t\t| \"inherit\"",
           "resolved": "\"black\" | \"gray\" | \"inherit\" | \"primary-gray\" | \"ptc-green\" | \"white\"",
           "references": {}
         },
@@ -242,13 +261,13 @@ export class PtcSocialShare {
         },
         "attribute": "icon-color",
         "reflect": false,
-        "defaultValue": "'white'"
+        "defaultValue": "\"white\""
       },
       "iconHoverColor": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'black' | 'white' | 'ptc-green' | 'gray' | 'primary-gray' | 'inherit'",
+          "original": "| \"black\"\r\n\t\t| \"white\"\r\n\t\t| \"ptc-green\"\r\n\t\t| \"gray\"\r\n\t\t| \"primary-gray\"\r\n\t\t| \"inherit\"",
           "resolved": "\"black\" | \"gray\" | \"inherit\" | \"primary-gray\" | \"ptc-green\" | \"white\"",
           "references": {}
         },
@@ -260,13 +279,13 @@ export class PtcSocialShare {
         },
         "attribute": "icon-hover-color",
         "reflect": false,
-        "defaultValue": "'gray'"
+        "defaultValue": "\"gray\""
       },
       "iconSize": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xxx-large' | 'xxxx-large'",
+          "original": "| \"small\"\r\n\t\t| \"medium\"\r\n\t\t| \"large\"\r\n\t\t| \"x-large\"\r\n\t\t| \"xx-large\"\r\n\t\t| \"xxx-large\"\r\n\t\t| \"xxxx-large\"",
           "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"xx-large\" | \"xxx-large\" | \"xxxx-large\"",
           "references": {}
         },
@@ -278,7 +297,7 @@ export class PtcSocialShare {
         },
         "attribute": "icon-size",
         "reflect": false,
-        "defaultValue": "'large'"
+        "defaultValue": "\"large\""
       },
       "darkFocusState": {
         "type": "boolean",

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

@@ -1,27 +1,27 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class PtcSpacer {
   constructor() {
-    this.breakpoint = '';
-    this.size = 'medium';
-    this.direction = 'vertical';
+    this.breakpoint = "";
+    this.size = "medium";
+    this.direction = "vertical";
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }));
+    return h(Host, { class: classMap });
   }
   getCssClassMap() {
     return {
       [this.size]: true,
-      ['ptc-spacer-horizontal']: this.direction === 'horizontal',
-      ['ptc-spacer-vertical']: this.direction === 'vertical',
-      ['ptc-spacer-xx-small']: this.breakpoint === 'xx-small',
-      ['ptc-spacer-x-small']: this.breakpoint === 'x-small',
-      ['ptc-spacer-small']: this.breakpoint === 'small',
-      ['ptc-spacer-medium']: this.breakpoint === 'medium',
-      ['ptc-spacer-large']: this.breakpoint === 'large',
-      ['ptc-spacer-x-large']: this.breakpoint === 'x-large',
-      ['ptc-spacer-xx-large']: this.breakpoint === 'xx-large',
-      ['ptc-spacer-xxx-large']: this.breakpoint === 'xxx-large',
+      ["ptc-spacer-horizontal"]: this.direction === "horizontal",
+      ["ptc-spacer-vertical"]: this.direction === "vertical",
+      ["ptc-spacer-xx-small"]: this.breakpoint === "xx-small",
+      ["ptc-spacer-x-small"]: this.breakpoint === "x-small",
+      ["ptc-spacer-small"]: this.breakpoint === "small",
+      ["ptc-spacer-medium"]: this.breakpoint === "medium",
+      ["ptc-spacer-large"]: this.breakpoint === "large",
+      ["ptc-spacer-x-large"]: this.breakpoint === "x-large",
+      ["ptc-spacer-xx-large"]: this.breakpoint === "xx-large",
+      ["ptc-spacer-xxx-large"]: this.breakpoint === "xxx-large",
     };
   }
   static get is() { return "ptc-spacer"; }
@@ -42,7 +42,7 @@ export class PtcSpacer {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'' | 'medium' | 'small' | 'large' | 'x-large' | 'xx-large' | 'x-small' | 'xx-small' | 'xxx-large'",
+          "original": "| \"\"\r\n\t\t| \"medium\"\r\n\t\t| \"small\"\r\n\t\t| \"large\"\r\n\t\t| \"x-large\"\r\n\t\t| \"xx-large\"\r\n\t\t| \"x-small\"\r\n\t\t| \"xx-small\"\r\n\t\t| \"xxx-large\"",
           "resolved": "\"\" | \"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\"",
           "references": {}
         },
@@ -54,13 +54,13 @@ export class PtcSpacer {
         },
         "attribute": "breakpoint",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "\"\""
       },
       "size": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'large' | 'medium' | 'small' | 'x-large' | 'x-small' | 'xx-large' | 'xx-small' | 'xxx-large' | 'xxxx-large' | 'space-144' | 'space-120' | 'space-128'",
+          "original": "| \"large\"\r\n\t\t| \"medium\"\r\n\t\t| \"small\"\r\n\t\t| \"x-large\"\r\n\t\t| \"x-small\"\r\n\t\t| \"xx-large\"\r\n\t\t| \"xx-small\"\r\n\t\t| \"xxx-large\"\r\n\t\t| \"xxxx-large\"\r\n\t\t| \"space-144\"\r\n\t\t| \"space-120\"\r\n\t\t| \"space-128\"",
           "resolved": "\"large\" | \"medium\" | \"small\" | \"space-120\" | \"space-128\" | \"space-144\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxxx-large\"",
           "references": {}
         },
@@ -72,13 +72,13 @@ export class PtcSpacer {
         },
         "attribute": "size",
         "reflect": false,
-        "defaultValue": "'medium'"
+        "defaultValue": "\"medium\""
       },
       "direction": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'vertical' | 'horizontal'",
+          "original": "\"vertical\" | \"horizontal\"",
           "resolved": "\"horizontal\" | \"vertical\"",
           "references": {}
         },
@@ -90,7 +90,7 @@ export class PtcSpacer {
         },
         "attribute": "direction",
         "reflect": false,
-        "defaultValue": "'vertical'"
+        "defaultValue": "\"vertical\""
       }
     };
   }

package/dist/collection/components/ptc-span/ptc-span.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-span/ptc-span.js

@@ -1,9 +1,9 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class PtcSpan {
   constructor() {
-    this.spanStyle = 'tag-style';
-    this.display = 'inline';
-    this.fontWeight = 'w-4';
+    this.spanStyle = "tag-style";
+    this.display = "inline";
+    this.fontWeight = "w-4";
     this.styles = undefined;
   }
   render() {
@@ -35,7 +35,7 @@ export class PtcSpan {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'link-style' | 'tag-style' | 'nav-style' | 'plm-hub-style' | 'plm-hub-style-smaller' | 'blog-tag'",
+          "original": "| \"link-style\"\r\n\t\t| \"tag-style\"\r\n\t\t| \"nav-style\"\r\n\t\t| \"plm-hub-style\"\r\n\t\t| \"plm-hub-style-smaller\"\r\n\t\t| \"blog-tag\"",
           "resolved": "\"blog-tag\" | \"link-style\" | \"nav-style\" | \"plm-hub-style\" | \"plm-hub-style-smaller\" | \"tag-style\"",
           "references": {}
         },
@@ -47,13 +47,13 @@ export class PtcSpan {
         },
         "attribute": "span-style",
         "reflect": false,
-        "defaultValue": "'tag-style'"
+        "defaultValue": "\"tag-style\""
       },
       "display": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'block' | 'inline-block' | 'inline'",
+          "original": "\"block\" | \"inline-block\" | \"inline\"",
           "resolved": "\"block\" | \"inline\" | \"inline-block\"",
           "references": {}
         },
@@ -65,13 +65,13 @@ export class PtcSpan {
         },
         "attribute": "display",
         "reflect": false,
-        "defaultValue": "'inline'"
+        "defaultValue": "\"inline\""
       },
       "fontWeight": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'w-3' | 'w-4' | 'w-5' | 'w-6' | 'w-7' | 'w-8' | 'w-9'",
+          "original": "\"w-3\" | \"w-4\" | \"w-5\" | \"w-6\" | \"w-7\" | \"w-8\" | \"w-9\"",
           "resolved": "\"w-3\" | \"w-4\" | \"w-5\" | \"w-6\" | \"w-7\" | \"w-8\" | \"w-9\"",
           "references": {}
         },
@@ -83,7 +83,7 @@ export class PtcSpan {
         },
         "attribute": "font-weight",
         "reflect": false,
-        "defaultValue": "'w-4'"
+        "defaultValue": "\"w-4\""
       },
       "styles": {
         "type": "string",

package/dist/collection/components/ptc-square-card/ptc-square-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 */

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

@@ -1,11 +1,15 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class PtcSquareCard {
   constructor() {
     this.number = undefined;
     this.arrowDirection = undefined;
   }
   render() {
-    return (h(Host, null, h("div", { class: "card-border square-padding card-layout" }, h("slot", { name: "seo-content" }), h("slot", { name: "before-icon" }), h("ptc-spacer", { breakpoint: "x-small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("div", { class: "icon-block" }, !!this.arrowDirection ? (h("icon-asset", Object.assign({ class: "icon" }, (this.arrowDirection === 'up' ? { name: 'arrow_ascending' } : { name: 'arrow_descending' }), { type: "ptc" }, !this.number ? { size: 'xxx-large' } : { size: 'xx-large' }, { color: "ptc-green" }))) : null, !!this.number ? h("div", { class: "number" }, this.number) : null), h("ptc-spacer", { breakpoint: "x-small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("slot", { name: "after-icon" }))));
+    return (h(Host, null, h("div", { class: "card-border square-padding card-layout" }, h("slot", { name: "seo-content" }), h("slot", { name: "before-icon" }), h("ptc-spacer", { breakpoint: "x-small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("div", { class: "icon-block" }, !!this.arrowDirection ? (h("icon-asset", Object.assign({ class: "icon" }, (this.arrowDirection === "up"
+      ? { name: "arrow_ascending" }
+      : { name: "arrow_descending" }), { type: "ptc" }, (!this.number
+      ? { size: "xxx-large" }
+      : { size: "xx-large" }), { color: "ptc-green" }))) : null, !!this.number ? (h("div", { class: "number" }, this.number)) : null), h("ptc-spacer", { breakpoint: "x-small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("slot", { name: "after-icon" }))));
   }
   static get is() { return "ptc-square-card"; }
   static get encapsulation() { return "shadow"; }
@@ -42,7 +46,7 @@ export class PtcSquareCard {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'up' | 'down'",
+          "original": "\"up\" | \"down\"",
           "resolved": "\"down\" | \"up\"",
           "references": {}
         },

package/dist/collection/components/ptc-sticky-icons/ptc-sticky-icons.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-sticky-icons/ptc-sticky-icons.js

@@ -1,4 +1,4 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class PtcStickyIcons {
   handleResize() {
     this.setHostLocation();
@@ -10,7 +10,7 @@ export class PtcStickyIcons {
     return (h(Host, null, h("div", { class: "icon-container" }, h("slot", null))));
   }
   setHostLocation() {
-    let width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
+    let width = window.innerWidth > 0 ? window.innerWidth : screen.width;
     const detailSection = document.querySelector(".cs-detail-section");
     let currEle = this.el;
     // get the element
@@ -23,7 +23,9 @@ export class PtcStickyIcons {
         // Code for case study page only
         // Moving sticky icon in the last ptc-section div
         if (detailSection) {
-          const lastSection = detailSection.querySelectorAll('.content-section section.ptc-section').length ? detailSection.querySelectorAll('section.ptc-section')[detailSection.querySelectorAll('section.ptc-section').length - 1] : null;
+          const lastSection = detailSection.querySelectorAll(".content-section section.ptc-section").length
+            ? detailSection.querySelectorAll("section.ptc-section")[detailSection.querySelectorAll("section.ptc-section").length - 1]
+            : null;
           if (lastSection && !lastSection.contains(element)) {
             lastSection.appendChild(currEle);
           }

package/dist/collection/components/ptc-sticky-section/ptc-sticky-section.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 */